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

问题描述

我正在尝试为正在使用的应用程序中的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,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,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="Суть обращения"/>
   )
}

解决方法

TextField呈现多个元素-FormControl元素的外部<div>，然后在其中InputLabel和Input element（例如{{ 1}}）。

FilledInput上的className道具将该类应用于TextField。默认的background color for FilledInput是FormControl，因此它仍被应用在rgba(0,0.09)上的浅蓝色背景上。

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

FormControl

另一种选择是利用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

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

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

检查浏览器开发人员工具中的元素，以查看Material-UI添加的类。
查看源代码。这需要了解一些Material-UI CSS类名称的生成方式。

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

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

此结构中的键（例如export const styles = (theme) => { const light = theme.palette.type === 'light'; const backgroundColor = light ? 'rgba(0,0.09)' : 'rgba(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.13)' : 'rgba(255,0.13)',// Reset on touch devices,it doesn't add specificity '@media (hover: none)': { backgroundColor,},'&$focused': { backgroundColor: light ? 'rgba(0,0.09)','&$disabled': { backgroundColor: light ? 'rgba(0,0.12)' : 'rgba(255,0.12)',）将转换为具有常规模式root（例如Mui${componentName}-${styleRuleKey}）的类名。伪类（例如MuiFilledInput-root，$focused）是documented here，并以$disabled（例如Mui-，Mui-focused）为前缀。>

通过遵循Mui-disabled源代码中的相同模式，可以覆盖悬停和集中的颜色：

FilledInput

我还有一个后续问题。如果我想在主题中定义这些值（例如，针对所有状态（包括悬停和焦点）的MuiFilledInput），我将如何做？现在，我可以通过添加以下内容来将其添加到常规状态：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,250)" },"& .MuiFilledInput-root:hover": { backgroundColor: "rgb(250,232,241)",it doesn't add specificity "@media (hover: none)": { backgroundColor: "rgb(232,250)" } },"& .MuiFilledInput-root.Mui-focused": { backgroundColor: "rgb(250,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="Суть обращения" /> ); }但是我无法将自定义背景值添加到主题以进行悬停和聚焦

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

const theme = createMuiTheme({ "overrides": { "MuiFilledInput": { "root": { "backgroundColor": 'rgb(232,250)' } } } })

css-in-js material-ui reactjs reactjs reactjs reactjs styling