Question

嗨，这看起来很简单，但我无法找到与此相关的任何内容，而我只想让以下字段显示为白色：

要具体说明默认标签和边框颜色。为了进一步说明，我确实通过将类通过InputProps传递来使输入文本本身变为白色。但被卡住了请在这里帮助我。

Answer 1

我认为@evayly是正确的，您应该使用主题提供程序（请参见上面的评论）。如果您只需要快速破解一次，那么遵循CSS似乎就足够了。但是，我真的不建议将其用于任何持久的工作。

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

Answer 2

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 个答案: