如何修改MUI TextField非悬浮状态下的标签文字颜色？

你的问题出在选的类名不对——.MuiInputBase-root-MuiOutlinedInput-root是输入框的容器类，根本管不到标签的颜色。要修改非悬浮（非聚焦）状态的标签，得针对标签本身的类来写样式，同时注意别用动态生成的类名（比如.css-1sumxir-xxx），这类名会随编译变化，用MUI提供的全局类名才稳。

正确的样式写法 #

直接在sx里替换你那行无效的代码，加上这两个规则：

• 未输入内容、非聚焦时的标签颜色
• 已输入内容、标签浮在上方的非聚焦状态颜色

完整代码示例：

<TextField 
    className="w-full my-2"
    id="outlined-basic" 
    label="Distance (miles)" 
    variant="outlined"
    onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
    sx={{
        // 聚焦时边框颜色
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {  
            border: "1px solid #3B82F6",
        },

        // 聚焦时标签颜色
        "& .MuiInputLabel-root.Mui-focused": {
            color: "#3B82F6",
        },

        // 默认边框颜色 
        "& .MuiOutlinedInput-notchedOutline": {  
            border: "1px solid #F1F4F9",
        },
        
        // 未输入内容、非聚焦时的标签颜色
        "& .MuiInputLabel-root": {
            color: "#F1F4F9"
        },

        // 已输入内容、标签上浮后的非聚焦颜色（可选，按需添加）
        "& .MuiInputLabel-root.MuiFormLabel-filled": {
            color: "#F1F4F9"
        },

        // 输入框文字颜色（如果需要的话）
        "& .MuiInputBase-input": {
            color: "#F1F4F9"
        }
    }}
/>

额外说明 #

• inputProps={{ sx: {color: '#F1F4F9'} }}没用的原因是：inputProps是给原生<input>元素加属性，而MUI的输入框文字样式被内部类覆盖了，直接在sx里选.MuiInputBase-input才管用。
• 避免用动态类名（比如你之前写的.css-1sumxir-MuiFormLabel-root-MuiInputLabel-root），这类名是MUI编译时随机生成的，换环境可能就失效了，用MuiInputLabel-root这种全局类名才可靠。

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