MUI TextField：如何在鼠标悬停时修改startAdornment的颜色

你可以通过在TextField的sx样式中，针对根元素悬停状态，选择startAdornment内的图标元素来修改颜色。具体修改如下：

<TextField
    variant="outlined"
    placeholder={placeholder}
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <SearchIcon />
            </InputAdornment>
        ),
        endAdornment: (
            <IconButton position="end" sx={{ "&:hover": { color: "#00AAA7" } }}>
                <CloseIcon />
            </IconButton>
        ),
    }}
    sx={{
        '& .MuiOutlinedInput-root': {
            borderRadius: '30px',
            '&:hover fieldset': {
                borderColor: '#00AAA7',
            },
            // 新增：根元素悬停时修改startAdornment内的图标颜色
            '&:hover .MuiInputAdornment-positionStart .MuiSvgIcon-root': {
                color: '#00AAA7',
            },
        },
    }}
/>

说明 #

• 使用.MuiInputAdornment-positionStart精准定位起始装饰元素，再选择内部的.MuiSvgIcon-root（图标元素），确保只修改startAdornment里的图标颜色，不会影响其他元素。
• 颜色值#00AAA7可以根据你的需求替换为其他颜色。

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