React Material UI 如何设置表单TextField白色文本及MUI背景色

问题1：设置TextField文本、占位符、标签为白色 #

你直接给textField类加color不生效的原因是Material UI的TextField内置子元素（输入框、标签、占位符）有独立的样式规则，权重高于根节点的自定义类，需要针对性覆盖子元素样式，修改makeStyles部分代码如下：

const useStyles = makeStyles((theme) => ({
  textField: {
    width: "100%",
    // 覆盖输入框文本颜色
    "& .MuiInputBase-input": {
      color: "white"
    },
    // 覆盖标签默认颜色
    "& .MuiInputLabel-root": {
      color: "rgba(255,255,255,0.7)"
    },
    // 覆盖标签聚焦时的颜色
    "& .MuiInputLabel-root.Mui-focused": {
      color: "white"
    },
    // 覆盖占位符颜色
    "& .MuiInputBase-input::placeholder": {
      color: "rgba(255,255,255,0.5)",
      opacity: 1
    },
    // 适配深色背景调整filled变体的输入框背景
    "& .MuiFilledInput-root": {
      backgroundColor: "rgba(255,255,255,0.1)"
    },
    "& .MuiFilledInput-root:hover": {
      backgroundColor: "rgba(255,255,255,0.15)"
    },
    "& .MuiFilledInput-root.Mui-focused": {
      backgroundColor: "rgba(255,255,255,0.2)"
    }
  }
}));

问题2：通过Material UI设置全局背景色 #

你提到的通过MUI主题配置实现的思路完全正确，不需要单独编写全局CSS，操作步骤如下：

1. 从@material-ui/core导入createTheme、ThemeProvider、CssBaseline组件
2. 自定义主题配置全局背景色
3. 用ThemeProvider包裹根组件，配合CssBaseline自动应用主题的全局样式
   完整修改后的App.js代码如下：

import { makeStyles } from "@material-ui/core/styles";
import { Grid, TextField, Button, Typography, createTheme, ThemeProvider, CssBaseline } from "@material-ui/core";

// 自定义全局主题
const theme = createTheme({
  palette: {
    background: {
      default: "#39445a" // 全局默认背景色，会自动应用到body
    },
    // 可按需调整主题主色
    primary: {
      main: "#90caf9"
    }
  }
});

function App() {
  const useStyles = makeStyles((theme) => ({
    textField: {
      width: "100%",
      "& .MuiInputBase-input": {
        color: "white"
      },
      "& .MuiInputLabel-root": {
        color: "rgba(255,255,255,0.7)"
      },
      "& .MuiInputLabel-root.Mui-focused": {
        color: "white"
      },
      "& .MuiInputBase-input::placeholder": {
        color: "rgba(255,255,255,0.5)",
        opacity: 1
      },
      "& .MuiFilledInput-root": {
        backgroundColor: "rgba(255,255,255,0.1)"
      },
      "& .MuiFilledInput-root:hover": {
        backgroundColor: "rgba(255,255,255,0.15)"
      },
      "& .MuiFilledInput-root.Mui-focused": {
        backgroundColor: "rgba(255,255,255,0.2)"
      }
    },
  }));

  const classes = useStyles();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Hi");
  };

  return (
    <ThemeProvider theme={theme}>
      {/* CssBaseline会重置默认样式并应用主题全局配置，包括背景色 */}
      <CssBaseline />
      <Grid container spacing={3}>
        <Grid item xs={6}></Grid>
        <Grid item xs={6} sm={6}>
          <Typography variant="h2" color="primary">
            Some information about you
          </Typography>
          <form onSubmit={handleSubmit}>
            <TextField
              label="Name"
              variant="filled"
              className={classes.textField}
            ></TextField>
            <TextField
              label="Phone Number"
              variant="filled"
              className={classes.textField}
            ></TextField>
            <Button
              type="submit"
              value="Submit"
              color="primary"
              variant="contained"
            >
              Submit
            </Button>
          </form>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

export default App;

修改完成后可删除原有CSS文件里的body背景色配置，所有样式都通过MUI系统统一管理，后续要动态切换主题仅需修改theme配置即可。

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