如何解决MaterialUI TextField:更改背景颜色无法正常工作
我正在尝试为正在使用的应用程序中的TextField
组件设置背景色,但是当我使用自定义RGB值向该组件添加style={{background: "rgb(232,241,250)"}}
时,似乎会显示它们位于默认的灰色背景颜色之上。
我不太了解这个问题是什么以及如何实际解决?
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)' } } } })
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。