MaterialUI TextField：更改背景颜色无法按预期工作

问题描述 投票：0回答：2

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

TextField
组件设置背景颜色，但是，当我使用自定义 RGB 值将 
style={{background: "rgb(232, 241, 250)"}}
添加到此组件时，它会将它们显示在默认值之上灰色背景颜色。

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

  1. 我尝试通过添加 

    style
    属性来解决它

  2. 此外，通过将 

    makeStyles()
    添加到组件并通过 
    className

    将其附加

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

  1. 我可以通过删除 
    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="Суть обращения"/>
   )
}
css reactjs material-ui styling css-in-js
2个回答
31
投票

TextField
渲染多个元素 - 
FormControl
元素的外部 <div>，然后是其中的 InputLabel 和 Input 元素（例如 
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="Суть обращения"
    />
  );
}

Edit filled TextField background

另一种选择是利用 

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

Edit filled TextField background (forked)

只是一个后续问题：如果我想在焦点和悬停时更改此 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="Суть обращения"
    />
  );
}

Edit filled TextField background (hover and focus)

我还有另一个后续问题。如果我想在主题中定义这些值（例如，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>
  );
}

Edit filled TextField background (hover and focus) via theme

0
投票

根据文档，现在在MUIv5中这似乎更容易。如果您想设置组件根元素的样式，只需将 CSS 属性直接添加到组件的 sx 属性即可。如果您想设置作为此组件一部分呈现的嵌套元素的样式，现在只需将类名称添加到同一个 sx 属性中即可。

例如，我想设计一个文本输入组件的样式。我添加 width: 100% 以使其更大，如果我希望背景颜色为白色而不是透明/灰色，我可以将嵌套 div 的 CSS 类名称添加到 sx，如下所示：

import TextField from '@mui/material/TextField';

<TextField
  id="text-search"
  label="Search for stuff"
  variant="filled"
  sx={{
    width: '100%',
    '& .MuiFilledInput-root': {
      backgroundColor: 'white'
    }
  }}
/>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.