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元素的外部<div>，然后在其中InputLabel和Input element（例如{{ 1}}）。

FilledInput上的className道具将该类应用于TextField。默认的background color for FilledInput是FormControl，因此它仍被应用在rgba(0, 0, 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, 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="Суть обращения"
    />
  );
}

此结构中的键（例如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）是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, 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="Суть обращения" /> ); }但是我无法将自定义背景值添加到主题以进行悬停和聚焦

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

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

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

1 个答案: