Question

我正在尝试为Material-ui文本字段设置样式，但我无法使其按我想要的方式工作。我只想要带有标准MUI动画的纯白色输入字段。我希望文本字段始终具有白色背景，文本始终为黑色。

您可以在代码沙箱中找到代码：https://codesandbox.io/s/material-demo-2coo8?fontsize=14&hidenavigation=1&theme=dark

谢谢！

Answer 1

您可以使用以下代码自定义 TextField 字体和背景颜色的样式：

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputBase-root": {
      color: 'black' //or try theme.palette.primary.main
      backgroundColor: 'white' //It should be white by default
    }
  }
}));

然后只需将“根”类添加到您的 TextField。作为信息，上述语法称为 JSS。 .MuiInputBase-root 是应用于输入组件的类，它是TextField 的子组件。 This article explores the TextField component 开发工具打开，因此您可以了解子组件的工作方式并通过 MUI 设置样式。

关于 JSS 语法的更多信息。注意“&”和“.”之间的“空格”。这个空间很重要，作为选择器的一部分，通知 .MuiInputBase-root 类位于接收“根”类样式的父组件的子组件上。

Answer 2

我强烈建议您使用功能组件，因为这是React的未来。

在下面，您可以将您的示例视为具有常规Material-UI样式的功能组件。

import React from "react";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: { backgroundColor: "white" },
  box: { backgroundColor: "white" },
  input: {
    root: { backgroundColor: "white", color: "black" }
  }
}));

export default function FunctionalDemo() {
  const classes = useStyles();
  return (
    <Grid
      container
      direction="row"
      justify="center"
      alignItems="center"
      className={classes.root}
    >
      <Grid item xs={12} md={6} className={classes.box}>
        <form noValidate>
          <TextField
            id="email"
            label="Type here"
            variant="filled"
            color="secondary"
            className={classes.input.root}
          />
        </form>
      </Grid>
    </Grid>
  );
}

代码沙箱：https://codesandbox.io/s/material-ui-plain-text-field-x2s48?fontsize=14&hidenavigation=1&theme=dark

样式材质用户界面文本字段

2 个答案: