如何调整React中Material UI Select组件的高度

方法1：用SX内联样式直接覆盖 #

不用找动态生成的类，直接在Select组件里通过sx属性精准修改内部输入框的样式：

<Box sx={{ minWidth: 120 }}>
    <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Price</InputLabel>
        <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Price"
            onChange={handleChange}
            sx={{
                '& .MuiSelect-select': {
                    padding: '0 0.75rem !important',
                    display: 'grid',
                    alignItems: 'center'
                }
            }}
        >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
        </Select>
    </FormControl>
</Box>

方法2：自定义CSS类全局覆盖 #

1. 在项目全局CSS文件（比如index.css）里添加样式：

.select-input-styles .MuiSelect-select {
    padding: 0 0.75rem !important;
    display: grid;
    align-items: center;
}

2. 在组件中通过InputProps引入这个类：

<Box sx={{ minWidth: 120 }}>
    <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Price</InputLabel>
        <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Price"
            onChange={handleChange}
            InputProps={{
                classes: { root: 'select-input-styles' }
            }}
        >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
        </Select>
    </FormControl>
</Box>

方法3：适配MDInput组件 #

如果用Material Dashboard的MDInput带select属性，同样用sx属性调整：

<MDInput
    select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    label="Price"
    fullWidth
    sx={{
        '& .MuiSelect-select': {
            padding: '0 0.75rem !important',
            display: 'grid',
            alignItems: 'center'
        }
    }}
>
    <MenuItem value={10}>No</MenuItem>
    <MenuItem value={11}>C</MenuItem>
    <MenuItem value={12}>Vehiculos</MenuItem>
    <MenuItem value={14}>XD</MenuItem>
</MDInput>

补充说明 #

你在浏览器里看到的.css-1cohrqd-xxx这类是Material UI动态生成的类名，每次构建都会变化，所以不能直接写死这个类。正确做法是用Material UI提供的全局类名（比如MuiSelect-select）定位元素，通过组件的sx属性或自定义类覆盖样式，这样不管动态类名怎么变，样式都能稳定生效。

内容的提问来源于stack exchange，提问作者hugo ovelar