如何修改MUI 5 TextField的占位符与文本颜色为绿色？

问题原因 #

你的代码中SX选择器写法有误：

• 类名组合时，.MuiInputBase-root和.MuiOutlinedInput-root属于同一元素的多类名，应该用.直接连接（不能用空格分隔）
• 占位符的伪元素选择器需要正确嵌套，且::placeholder前不需要额外空格

正确实现代码 #

直接修正SX中的选择器即可生效：

<TextField
  multiline
  rows={3}
  id="outlined-basic"
  placeholder="My placeholder"
  variant="outlined"
  sx={{
    // 设置输入文本颜色为绿色
    "& .MuiInputBase-root.MuiOutlinedInput-root": {
      color: "green"
    },
    // 设置占位符文本颜色为绿色
    "& .MuiInputBase-root.MuiOutlinedInput-root::placeholder": {
      color: "green",
      opacity: 1 // 可选：默认占位符带透明度，设为1可让绿色更纯正
    }
  }}
/>

全局样式补充（可选） #

如果需要让所有TextField统一使用该样式，可以通过修改MUI主题实现：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          "& .MuiInputBase-root.MuiOutlinedInput-root": {
            color: "green"
          },
          "& .MuiInputBase-root.MuiOutlinedInput-root::placeholder": {
            color: "green",
            opacity: 1
          }
        }
      }
    }
  }
});

// 在应用根组件外层包裹ThemeProvider
<ThemeProvider theme={theme}>
  {/* 你的业务组件 */}
</ThemeProvider>

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