MUI 文本字段标签未正确浮动到左上角

Question

I try to use the MUI in my project, and all the input fields I use don't behave correctly.

it supposed to look like this

but when I use it it will look like this

import Box from '@mui/material/Box'
import TextField from '@mui/material/TextField'
import Autocomplete from '@mui/material/Autocomplete'

<Autocomplete
className="mt-3"
size="small"
id="country-select-demo"
options={arr}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(props, option) => (
<Box
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...props}
>
{option.label}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose.."
inputProps={{
...params.inputProps,
}}
/>
)}

Answer 1

我刚刚发现卸载 react-bootstrap 可以解决这个问题。