如何使用SX修改MUI Select组件浮动状态下InputLabel的颜色？

你当前代码的问题在于选择器写法错误，& Mui-focused是后代选择器，而focused状态类是直接添加在InputLabel自身上的，需要调整选择器写法，以下是两种可行方案：

方案一：直接在InputLabel的sx中设置 #

<FormControl fullWidth size='small'>
    <InputLabel 
        id="demo-simple-select-label" 
        sx={{
            // 控制InputLabel处于focused（激活浮动）状态的颜色
            '&.Mui-focused': { color: 'red' },
            // 可选：控制选中选项后label保持浮动状态的颜色
            '&.MuiInputLabel-shrink': { color: 'blue' }
        }}
    >Bloques Aerial</InputLabel>
    <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        onChange={changeSecondSelect}
        sx={{ backgroundColor: 'white', color: 'black' }}
    >
        {selectedBlocks?.map((item, index) => (
            <MenuItem key={index} value={item}>{item}</MenuItem>
        ))}
    </Select>
</FormControl>

方案二：通过FormControl统一控制样式 #

如果希望把样式集中在FormControl上，可以这样写：

<FormControl 
    fullWidth 
    size='small'
    sx={{
        '& .MuiInputLabel-root.Mui-focused': { color: 'red' },
        '& .MuiInputLabel-root.MuiInputLabel-shrink': { color: 'blue' }
    }}
>
    <InputLabel id="demo-simple-select-label">Bloques Aerial</InputLabel>
    <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        onChange={changeSecondSelect}
        sx={{ backgroundColor: 'white', color: 'black' }}
    >
        {selectedBlocks?.map((item, index) => (
            <MenuItem key={index} value={item}>{item}</MenuItem>
        ))}
    </Select>
</FormControl>

关键说明 #

• &.Mui-focused：无空格的类选择器，匹配自身带有Mui-focused类的InputLabel元素，对应Select激活时label上浮的状态。
• MuiInputLabel-shrink：当Select选中选项后，label会保持浮动，此时会添加这个类，可按需修改该状态下的颜色。

内容的提问来源于stack exchange，提问作者Josh Winters