Material UI - 覆盖 InputBase 的禁用样式
Material UI - Overide disabled styles for InputBase
我似乎无法找到一种方法来覆盖 InputBase
上的以下规则:
.MuiInputBase-root.Mui-disabled {
color: rgba(0, 0, 0, 0.38);
}
我要应用的规则是:color: "rgba(0, 0, 0, 0.75)"
我试过使用类名和 类 但没有任何效果。有什么想法吗?
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
'&:disabled': {
color: "rgba(0, 0, 0, 0.75)"
}
},
disabled: {
color: "rgba(0, 0, 0, 0.75)",
'&:disabled': {
color: "rgba(0, 0, 0, 0.75)"
}
}
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
className={classes.textField}
classes={{
root: classes.disabled,
disabled: classes.disabled
}}
margin="normal"
variant="outlined"
/>
Codesandbox:https://codesandbox.io/s/material-demo-3xb7n
TextField 不支持禁用的规则名称。
您需要向 TextField 提供 InputProps,在那里您可以提供禁用的规则名称:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
},
inputRoot: {
'&$disabled': {
color:'red'
},
},
disabled: {}
}));
export default function OutlinedTextFields() {
const classes = useStyles();
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
InputProps={{
classes:{
root: classes.inputRoot,
disabled: classes.disabled
}
}}
margin="normal"
variant="outlined"
/>
</form>
);
}
我想为这个问题提供另一个答案。我在使用 InputBase 组件时发现了它,但它也适用于 TextField 和 Material UI.
提供的其他输入组件
您可以使用嵌套选择器来设置这些类型的组件的样式。当您创建一个 TextField 时,默认情况下它会在网页上创建一个 HTML 输入元素。这就是你想要的样式。
例如,如果您想在禁用 TextField 时将文本的颜色从黑色更改为灰色,您可以将其用于您的主题:
const useStyles = theme => ({
textField: {
'& input': {
color: '#000000',
},
'& input:disabled': {
color: '#CCCCCC',
},
},
});
然后,对于元素,您只需设置其 class。不需要 InputProps。
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
className={classes.textField}
margin="normal"
variant="outlined"
/>
下面是适合您的代码片段...
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
export default function DisabledTextInput (props) {
const disabledFlag = true;
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
root: {
"&$disabled": {
color: "rgba(0, 0, 0, 0.75)"
}
}
},
},
});
return (
<ThemeProvider theme={theme}>
<TextField
variant="outlined"
disabled={disabledFlag}
...
/>
</ThemeProvider>
);
}
我似乎无法找到一种方法来覆盖 InputBase
上的以下规则:
.MuiInputBase-root.Mui-disabled {
color: rgba(0, 0, 0, 0.38);
}
我要应用的规则是:color: "rgba(0, 0, 0, 0.75)"
我试过使用类名和 类 但没有任何效果。有什么想法吗?
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
'&:disabled': {
color: "rgba(0, 0, 0, 0.75)"
}
},
disabled: {
color: "rgba(0, 0, 0, 0.75)",
'&:disabled': {
color: "rgba(0, 0, 0, 0.75)"
}
}
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
className={classes.textField}
classes={{
root: classes.disabled,
disabled: classes.disabled
}}
margin="normal"
variant="outlined"
/>
Codesandbox:https://codesandbox.io/s/material-demo-3xb7n
TextField 不支持禁用的规则名称。 您需要向 TextField 提供 InputProps,在那里您可以提供禁用的规则名称:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
},
inputRoot: {
'&$disabled': {
color:'red'
},
},
disabled: {}
}));
export default function OutlinedTextFields() {
const classes = useStyles();
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
InputProps={{
classes:{
root: classes.inputRoot,
disabled: classes.disabled
}
}}
margin="normal"
variant="outlined"
/>
</form>
);
}
我想为这个问题提供另一个答案。我在使用 InputBase 组件时发现了它,但它也适用于 TextField 和 Material UI.
提供的其他输入组件您可以使用嵌套选择器来设置这些类型的组件的样式。当您创建一个 TextField 时,默认情况下它会在网页上创建一个 HTML 输入元素。这就是你想要的样式。
例如,如果您想在禁用 TextField 时将文本的颜色从黑色更改为灰色,您可以将其用于您的主题:
const useStyles = theme => ({
textField: {
'& input': {
color: '#000000',
},
'& input:disabled': {
color: '#CCCCCC',
},
},
});
然后,对于元素,您只需设置其 class。不需要 InputProps。
<TextField
disabled
id="outlined-disabled"
label="Disabled"
defaultValue="Hello World"
className={classes.textField}
margin="normal"
variant="outlined"
/>
下面是适合您的代码片段...
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
export default function DisabledTextInput (props) {
const disabledFlag = true;
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
root: {
"&$disabled": {
color: "rgba(0, 0, 0, 0.75)"
}
}
},
},
});
return (
<ThemeProvider theme={theme}>
<TextField
variant="outlined"
disabled={disabledFlag}
...
/>
</ThemeProvider>
);
}