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

Question

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

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

我试图通过添加 style 属性来解决它
此外，通过将 makeStyles() 添加到组件并通过 className
附加它

在这两种情况下，我都得到了上面屏幕截图中的输出。

我能够通过删除 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 呈现多个元素——FormControl element, and then within that the InputLabel and the Input element 的外部 <div>（例如 FilledInput）。

TextField 上的 className 支持将 class 应用于 FormControl。默认的 background color for FilledInput 是 rgba(0, 0, 0, 0.09)，所以这仍然应用在 FormControl 上的浅蓝色背景上。

您可以改为覆盖 FilledInput 上的 background-color，如下所示：

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="Суть обращения"
    />
  );
}

Just a follow up question: if I wanted to change the background color scheme on this TextField on focus and hover, would I also do it via some class override in the makeStyles? And what would it be or where could I find the names of those classes?

确定classes的名称主要有两种方式：

检查浏览器开发人员工具中的元素以查看由 Material-UI 添加的 classes。
看源码。这需要了解一些 Material-UI CSS class 名称是如何生成的。

在 FilledInput 中，您可以找到定义的以下样式（在下面进行简化以仅包含 background-color 样式）：

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} 通用模式的 class 名称（例如 MuiFilledInput-root）。 pseudo-classes（例如 $focused、$disabled）是 documented here 并以 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="Суть обращения"
    />
  );
}

I have another follow up question. If I wanted to define those values in the theme (for example, MuiFilledInput for all states including hover and focus), how would I do it? I was able to add it on its regular state right now through adding: const theme = createMuiTheme({ "overrides": { "MuiFilledInput": { "root": { "backgroundColor": 'rgb(232, 241, 250)' } } } }) But I can't add custom background values to the theme for hover and focus

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

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>
  );
}

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

MaterialUI TextField : changing background color is not working as it is supposed to

css

styling

reactjs

material-ui

css-in-js