【Jetpack Compose】TabRow의 배경색이 White가 되지 않는 경우

문제점

Jetpack Compose의 TabRow의 배경에 white를 지정하고 있는데 왠지 회색이 되어 버리거나, 정상적으로 백색이 되지 않는 경우가 있습니다.
예를 들면 이런 느낌입니다.

@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") }
        )
    }
}

제대로 backgroundColor = Color.White 로 지정하고 있음에도 불구하고 회색으로 되어 버리고 있습니다.
여기에서 한층 더 테두리의 색을 바꾸고 싶은 등으로 ContentColor도 지정하면, 배경색이 그쪽으로 당겨져 버립니다.

@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") }
        )
    }
}

어쨌든 backgroundColor가 제대로 작동하지 않습니다. .
ContentColor도, 본래는 문자색과 인디케이터의 색등에 작용하는 것만이 배경색에도 영향해 버리고 있습니다.
배경색을 흰색으로 하고 싶은 경우는 매우 많다고 생각합니다만, 이것으로는 막혀 버려 진행되지 않습니다😭

해결책

StackOverflow의 비슷한 문제의 스레드에 해결책을 올려주는 사람이있었습니다 💡
(자신이 보았을 때는 해결책은 없었습니다만 정기적으로 체크하고 있으면 써 주고 있는 사람이 있었습니다)

무려, 원인은 TabRow의 Modifier에 height를 지정하고 있었던 것이었습니다 (왜)

이전 코드에서는 TabRow의 수정자 부분에서 50dp 높이를 지정했습니다. 여기가 나쁜 일을하는 것 같습니다.
시험에 이 height를 삭제하고 동작시켜 보면 정상적으로 배경이 흰색이 되었습니다!

@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") }
        )
    }
}

그렇지만 이것이라면 높이의 지정이 되어 있지 않습니다.
높이를 지정할 때는 TabRow가 아니라 Tab쪽으로 지정하면 좋을 것 같습니다.

@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") }
        )
    }
}