MaterialUI TextField ：更改背景颜色无法正常工作

Question

我正在尝试为TextField我正在处理的应用程序中的组件设置背景颜色，但是似乎当我style={{background: "rgb(232, 241, 250)"}}使用自定义 RGB 值添加到该组件时，它会将它们显示在默认的灰色背景颜色之上。

背景颜色应该与上述组件中的浅蓝色相同：

1. 我试图通过style向它添加属性来解决它

2. 此外，通过添加makeStyles()到组件并通过className

在这两种情况下，我都得到了如上面截图所示的输出。

3. 我能够通过将variant=filled其删除或设置为standard或来获得正确的背景颜色outlined，但随后文本周围的填充将被删除。

我真的不明白这是什么问题以及如何实际解决？

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

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
     root: {
         background: 'rgb(232, 241, 250)'
      },
}));

export interface InquiryContentInputProps {
   content: string;
   onChange: (content: string) => void;
}

export function InquiryContentInput(props: InquiryContentInputProps) {
   const classes = useStyles();

   return (
       <TextField
          variant="filled"
          // style={{background: "rgb(232, 241, 250)"}}
          className={classes.root}
          fullWidth={true}
          multiline={true}
          rows={5}
          rowsMax={10}
          value={props.content}
          onChange={(e) => props.onChange(e.target.value as string)}
          label="???? ?????????"/>
   )
}

Answer 1

TextField呈现几个元素-外<div>的FormControl元素，然后内的InputLabel和输入元件（例如，FilledInput）。

上的className道具TextField将该类应用于FormControl. FilledInput的默认背景颜色是rgba(0, 0, 0, 0.09)，因此它仍然应用于FormControl.

您可以改为覆盖 FilledInput 上的背景颜色，如下所示：

import React from "react";
import TextField from "@material-ui/core/TextField";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiFilledInput-root": {
      background: "rgb(232, 241, 250)"
    }
  }
}));

export default function InquiryContentInput(props) {
  const classes = useStyles();

  return (
    <TextField
      variant="filled"
      className={classes.root}
      fullWidth={true}
      multiline={true}
      rows={5}
      rowsMax={10}
      value={props.content}
      onChange={(e) => props.onChange(e.target.value)}
      label="???? ?????????"
    />
  );
}

另一种选择是利用为输入InputProps指定className：

import React from "react";
import TextField from "@material-ui/core/TextField";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  input: {
    background: "rgb(232, 241, 250)"
  }
}));

export default function InquiryContentInput(props) {
  const classes = useStyles();

  return (
    <TextField
      variant="filled"
      InputProps={{ className: classes.input }}
      fullWidth={true}
      multiline={true}
      rows={5}
      rowsMax={10}
      value={props.content}
      onChange={(e) => props.onChange(e.target.value)}
      label="???? ?????????"
    />
  );
}

只是一个后续问题：如果我想在焦点和悬停时更改此 TextField 上的背景配色方案，我是否也可以通过 makeStyles 中的某些类覆盖来完成？它会是什么或者我在哪里可以找到这些类的名称？

确定类的名称有两种主要方法：

1. 检查浏览器开发人员工具中的元素以查看 Material-UI 添加的类。

2. 查看源代码。这需要了解一些 Material-UI CSS 类名称是如何生成的。

在FilledInput 中，您可以找到以下定义的样式（下面简化为仅包含背景颜色样式）：

export const styles = (theme) => {
  const light = theme.palette.type === 'light';
  const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';

  return {
    /* Styles applied to the root element. */
    root: {
      backgroundColor,
      transition: theme.transitions.create('background-color', {
        duration: theme.transitions.duration.shorter,
        easing: theme.transitions.easing.easeOut,
      }),
      '&:hover': {
        backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor,
        },
      },
      '&$focused': {
        backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)',
      },
      '&$disabled': {
        backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
      },
    },

此结构中的键（例如root）将转换为具有一般模式Mui${componentName}-${styleRuleKey}（例如MuiFilledInput-root）的类名。伪类（例如$focused, $disabled）在此处记录并以Mui-（例如Mui-focused, Mui-disabled）为前缀。

您可以按照与FilledInput源代码中相同的模式覆盖悬停和聚焦颜色：

import React from "react";
import TextField from "@material-ui/core/TextField";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiFilledInput-root": {
      backgroundColor: "rgb(232, 241, 250)"
    },
    "& .MuiFilledInput-root:hover": {
      backgroundColor: "rgb(250, 232, 241)",
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: "rgb(232, 241, 250)"
      }
    },
    "& .MuiFilledInput-root.Mui-focused": {
      backgroundColor: "rgb(250, 241, 232)"
    }
  }
}));

export default function InquiryContentInput(props) {
  const classes = useStyles();

  return (
    <TextField
      variant="filled"
      className={classes.root}
      fullWidth={true}
      multiline={true}
      rows={5}
      rowsMax={10}
      value={props.content}
      onChange={(e) => props.onChange(e.target.value)}
      label="???? ?????????"
    />
  );
}

我还有一个后续问题。如果我想在主题中定义这些值（例如，MuiFilledInput 用于所有状态，包括悬停和焦点），我该怎么做？我现在可以通过添加将其添加到常规状态：const theme = createMuiTheme({ "overrides": { "MuiFilledInput": { "root": { "backgroundColor": 'rgb(232, 241, 250)' } } } })但是我无法将自定义背景值添加到主题以进行悬停和聚焦

以下是在主题中执行这些相同样式的语法：

import React from "react";
import TextField from "@material-ui/core/TextField";

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      root: {
        backgroundColor: "rgb(232, 241, 250)",
        "&:hover": {
          backgroundColor: "rgb(250, 232, 241)",
          // Reset on touch devices, it doesn't add specificity
          "@media (hover: none)": {
            backgroundColor: "rgb(232, 241, 250)"
          }
        },
        "&.Mui-focused": {
          backgroundColor: "rgb(250, 241, 232)"
        }
      }
    }
  }
});

export default function InquiryContentInput(props) {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        variant="filled"
        fullWidth={true}
        multiline={true}
        rows={5}
        rowsMax={10}
        value={props.content}
        onChange={(e) => props.onChange(e.target.value)}
        label="???? ?????????"
      />
    </ThemeProvider>
  );
}