jetpack compose can't set search bar background color to white

Question

I have a search bar with textfield when I try to set background color to white it comes with gray but I can make it to other colors only white not working if I change Textfiled to BasicTexfield it works fine but can't set the Icon top start

@Composable
fun DoctorListScreen(
navController: NavController,
viewModel: DoctorListViewModel = hiltViewModel()
) {
Surface(
    color = Color.White,
    modifier = Modifier.fillMaxSize(1f)
) {
    Column {
        Spacer(modifier = Modifier.padding(top = 15.dp))
        SearchBar(
            hint = "Klinik ara..", modifier = Modifier
                .fillMaxWidth()
                .padding(15.dp)
        ) {
        }
        CheckGender(modifier = Modifier.padding(15.dp))

    }
}
}


@Composable
fun SearchBar(
modifier: Modifier = Modifier,
hint: String = "",
onSearch: (String) -> Unit = {},
) {

var text by remember {
    mutableStateOf("")
}

var isHintDisplayed by remember {
    mutableStateOf(hint != "")
}
Box(modifier = modifier) {
    TextField(value = text, onValueChange = {
        text = it
        onSearch(it)
    }, leadingIcon = {
        Icon(painter = painterResource(id = R.drawable.search), contentDescription = null)
    }, maxLines = 1,
        singleLine = true,
        modifier = Modifier
            .fillMaxWidth()
            .shadow(5.dp, shape = RoundedCornerShape(10.dp))
            .background(Color.White, shape = RoundedCornerShape(10.dp))
            .onFocusChanged {
                isHintDisplayed = it.isFocused != true && text.isEmpty()
            })
    if (isHintDisplayed) {
        Text(
            text = hint,
            color = Color.LightGray,
            modifier = Modifier.padding(horizontal = 50.dp, vertical = 16.dp)
        )
    }
}
}

how it looks like :

both background and bar color is white but seems different

Answer 1

Add this line in your Textfield:

colors = TextFieldDefaults.textFieldColors(
    backgroundColor = Color.White)

Answer 2

Remove the background modifier:

//background(Color.White, shape = RoundedCornerShape(10.dp))

and use:

 TextField(
         /* .... */
        shape = RoundedCornerShape(10.dp),
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
 )