将Material UI的文本字段从黑色更改为白色[重复]答案

【问题标题】：Change Text field of Material UI from black to white [duplicate]将Material UI的文本字段从黑色更改为白色[重复]
【发布时间】：2020-08-21 19:43:39
【问题描述】：

您好，这看起来很简单，但我找不到任何关于此的信息，我只想让以下字段看起来是白色的：

具体的默认标签和边框颜色。为了进一步澄清，我确实设法通过 InputProps 传递类来使输入文本本身变白。但我坚持这一点。请帮帮我。

【问题讨论】：

您可以将您当前的代码添加到问题中吗？
您必须使用 ThemeProvider 并根据您的自定义添加主题对象。 material-ui.com/customization/theming我们对你的实现一无所知，因为你没有分享你的代码，所以这是凭空而来的。

标签： reactjs material-ui

【解决方案1】：

Ciao，要使border 变成白色，您必须：

定义一个Theme 对象，您必须在其中定义一个primary 颜色并覆盖MuiOutlinedInput，如下所示：

   const Theme = {
    palette: {
     primary: {
      contrastText: "#FFFFFF",
      dark: "#FFFFFF",
      main: "#FFFFFF",
      light: "#FFFFFF"
     }
   },
   overrides: {
    MuiOutlinedInput: {
      root: {
        position: "relative",
        "& $notchedOutline": {
          borderColor: "#FFFFFF"
        },
        "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
          borderColor: "#FFFFFF",
          "@media (hover: none)": {
            borderColor: "#FFFFFF"
          }
        },
        "&$focused $notchedOutline": {
          borderColor: "#FFFFFF",
          borderWidth: 1
        }
      }
     }
    }
   };

（我知道，这将覆盖您将在项目中使用的所有 MuiOutlinedInputs，但我发现只有这种方式）。

要将这个Theme 传递给TextField，您必须将它包装成ThemeProvider 并创建一个mui 主题：

import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
...
const theme = createMuiTheme(Theme);
...

return (
    <ThemeProvider theme={theme}>
      <div class={classes.root}>
        <TextField />
        ....
     </ThemeProvider>
);

对于文本颜色和默认标签，您必须使用 InputProps 和 InputLabelProps 与 className 类似：

<TextField
   variant="outlined"
   id="fullName"
   label="Username"
   InputProps={{
     className: classes.input
   }}
   InputLabelProps={{
     className: classes.input
   }}
 />

css 将是：

const useStyles = makeStyles(() => ({
  input: {
    color: "white"
  }
}));

Here 一个代码框示例。

【讨论】：

【解决方案2】：

我认为@evayly 是正确的，您应该使用主题提供程序（请参阅上面的评论）。如果您只需要一次快速破解，那么跟随 CSS 似乎就足够了。但是我真的不推荐它用于任何持久的东西。

.MuiOutlinedInput-notchedOutline {
    border-color: white;
}
.MuiFormLabel-root {
    color: white;
}
.MuiInputBase-input {
    color: white;
}

【讨论】：