【Jetpack Compose】TabRowの背景色がWhiteにならない場合

## 問題点

Jetpack ComposeのTabRowのbackgroundにwhiteを指定しているのになぜかグレーになってしまったり、正常に白色にならない場合があります。
例えばこんな感じです。

```kotlin
@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp),
        backgroundColor = Color.White
    ) {
        Tab(
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166629/14be0708-1d3c-f91d-49b1-be07415d974d.png" width=320 />

きちんと `backgroundColor = Color.White` に指定しているにも関わらずグレーになってしまっています。
ここでさらにボーダーの色を変えたいなどでContentColorも指定すると、背景色がそちらに引っ張られてしまいます。

```kotlin
@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp),
        backgroundColor = Color.White
        contentColor = Color.Magenta, // ← 文字色やボーダーの色指定
    ) {
        Tab(
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166629/69fe8f23-3900-b935-2891-1d46546278a2.png" width=320 />

どう見てもbackgroundColorが正常に動作していません。。
ContentColorも、本来は文字色とインジケーターの色などに作用するだけのはずが背景色にも影響してしまっています。
背景色を白にしたいケースは非常に多いと思うのですが、これでは詰んでしまって進みません😭

## 解決策

StackOverflowの同様の問題のスレッドに解決策を載せてくれている人がいました💡
（自分が見たときは解決策はなかったのですが定期的にチェックしてたら書き込みしてくれている人がいました）

https://stackoverflow.com/questions/68270720/android-jetpack-compose-white-tabrow/68844290#68844290?newreg=77e87433f2bf4b558d024e6dca251af4

なんと、原因はTabRowのModifierにheightを指定していたことでした（なんで）

先程のコードではTabRowのmodifierの部分で50dpの高さを指定していました。ここが悪さをするみたいです。
試しにこのheightを削除して動作させてみると正常に背景が白になりました！

```kotlin
@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier.fillMaxWidth(), // ここでheightを指定してはいけない
        backgroundColor = Color.White,
        contentColor = Color.Magenta,
    ) {
        Tab(
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166629/2a2024d3-fed2-5fa0-ea3d-d9c79ff940a5.png" width=320 />

でもこれだと高さの指定ができていません。
高さの指定をするときはTabRowではなく、Tabのほうに指定すればいいみたいです。

```kotlin
@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = Color.White,
        contentColor = Color.Magenta,
    ) {
        Tab(
            modifier = Modifier.height(100.dp),
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            modifier = Modifier.height(100.dp),
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166629/1667e29c-9be8-c3ec-b352-3dcf945c55d0.png" width=320 />