Css MaterialUI TextField:更改背景色并没有按预期的方式工作

我正在尝试为我正在使用的应用程序中的

TextField

组件设置背景色，但是，当我将

style={{background:“rgb（232，241，250）”}

添加到带有自定义rgb值的组件时，它会将它们显示在默认灰色背景色之上

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

我试图通过添加

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

从“React”导入React；
从“@material ui/core”导入{TextField}”；
从'@material ui/core/styles'导入{makeStyles}；
const useStyles=makeStyles（（主题）=>({
根目录：{
背景：“rgb（232、241、250）”
},
}));
导出接口InquiryContentInputProps{
内容：字符串；
onChange:（内容：字符串）=>void；
}
导出函数InquiryContentInput（props:InquiryContentInputProps）{
const classes=useStyles（）；
返回(
props.onChange（e.target.value作为字符串）}
label=“Сбббббб”/
)
}

TextField

呈现多个元素——元素的外部

，然后在内部和（例如

FilledInput

）

TextField

上的

className

属性将该类应用于

FormControl

。默认值为

rgba（0,0,0,0.09）

，因此这仍然应用于

窗体控件上的浅蓝色背景上

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


只是一个后续问题：如果我想在焦点和悬停上更改这个文本字段的背景色方案，我是否也会通过makeStyles中的一些类重写来实现？那会是什么？我在哪里可以找到这些类的名称

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

检查浏览器开发人员工具中的元素，以查看由材质UI添加的类


看看源代码。这需要了解一些材质UI CSS类名是如何生成的


在中，您可以找到定义的以下样式（将下面的内容简化为仅包括背景色样式）：

此结构中的键（例如
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="Суть обращения"
    />
  );
}

一切正常，谢谢！只是一个后续问题：如果我想在焦点和悬停上更改这个文本字段的背景色方案，我是否也会通过makeStyles中的一些类重写来实现？“那会是什么，或者在哪里可以找到这些类的名称？”Konstantink1我在回答的末尾又加了一个例子。@RyanCogswell。你好你能帮我做这件事吗。感谢you@RyanCogswell大家好，我还有一个后续问题。如果我想在主题中定义这些值（例如，包括悬停和焦点在内的所有状态的MuiFilledInput），我将如何做？我现在可以通过添加：const theme=createMuiTheme（{“覆盖”：{“MuiFilledInput”：{“root”：{“backgroundColor”：“rgb（232，241，250）}}}}}）将其添加到其常规状态但是我不能为悬停和移动的主题添加自定义背景值focus@Konstantink1最后我添加了一个主题示例。
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)',
      },
    },

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

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