我在React中使用Material UI。尝试覆盖使用全局主题设置的TextField
组件样式。我已经为应用程序中的所有TextField
组件设置了全局主题。
相关代码:
theme-engine.js
:
export const theme = brand => createMuiTheme({
palette: {
primary: {
main: Brand.getColors(brand).primary
},
secondary: {
main: Brand.getColors(brand).secondary
},
},
typography: {
fontFamily,
fontSize: 14,
htmlFontSize: 16
},
overrides: {
MuiInputBase: {
root: {
color: 'rgba(0, 0, 0, 0.87)',
fontSize: '14px',
fontFamily,
'&:after': {
borderBottom: Brand.getColors(brand).primary,
backgroundColor: Brand.getColors(brand).primary,
height: 1
},
'&:focused:not($disabled):not($error):before': {
borderBottom: Brand.getColors(brand).primary,
backgroundColor: Brand.getColors(brand).primary,
height: 1
},
'&$error:before': {
borderBottom: '#f44336',
backgroundColor: '#f44336',
height: 1
},
},
},
MuiInput: {
root: {
fontFamily
},
underline: {
'&:hover:not($disabled):not($error):not($focused):before': {
borderBottom: '#e0e0e0',
backgroundColor: '#e0e0e0',
height: 1
},
'&:not($disabled):not($error):after': {
borderBottom: Brand.getColors(brand).primary,
backgroundColor: Brand.getColors(brand).primary,
height: 1
},
'&$error:before': {
borderBottom: '#f44336',
backgroundColor: '#f44336',
height: 1
},
'&$error:after': {
borderBottom: '#f44336',
backgroundColor: '#f44336',
height: 1
},
},
},
MuiSvgIcon: {
colorPrimary: {
fill: '#74797b'
},
colorSecondary: {
fill: Brand.getColors(brand).primary,
}
},
}
});
container.js
:
render() {
return (
<MuiThemeProvider theme={theme(brand)}>
//stuff goes here
</MuiThemeProvider>
)
}
现在在其中一个组件中,我正在为TextField
使用图标,并且还希望下划线也位于该图标下方。为此,我试图覆盖提供的主题,该主题不起作用。已应用theme-engine
中的样式,但是本地替代无效。
some-component.js
import TextField from '@material-ui/core/TextField';
import {withStyles} from '@material-ui/core/styles';
const TextFieldIcon = withStyles(theme => ({
root: {
underline: {
color: 'red',
height: 4,
'&:before': {
borderBottom: `1px solid #e0e0e0`,
bottom: '-8px',
left: '-32px'
},
'&:hover:not($disabled):not($error):not($focused):before': {
borderBottom: 'red',
backgroundColor: 'red',
height: 1,
bottom: '-8px',
left: '-32px'
},
'&:not($disabled):not($error):after': {
height: 2,
bottom: '-8px',
left: '-32px'
},
'&$error:before': {
height: 1,
bottom: '-8px',
left: '-32px'
},
'&$error:after': {
height: 1,
bottom: '-8px',
left: '-32px'
},
},
}
}))(TextField);
class SomeComponent extends Component{
//Lifecycle methods to make your life easier....or difficult.
render(){
return(
<TextFieldIcon {...assign props and stuff} /> //Styles are not applied
)
}
}
所以问题是,我想保留自定义全局主题,但还要在我的组件中覆盖其中的某些部分。任何输入表示赞赏。
答案 0 :(得分:1)
我看到一些问题:
underline
规则嵌套在root
下。您应该只需要删除外面的root
块$disabled
,$error
和$focused
),这些规则需要在您传递给withStyles
的样式对象中定义withStyles
生成的类是Input
包装的TextField
组件的类,因此您需要通过InputProps
属性传递它们下面是您需要的语法的有效示例。我没有尝试评估这些样式是否符合您的预期,但是肯定会应用它们。
import React from "react";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
underline: {
color: "red",
height: 4,
"&:before": {
borderBottom: `1px solid #e0e0e0`,
bottom: "-8px",
left: "-32px"
},
"&:hover:not($disabled):not($error):not($focused):before": {
borderBottom: "red",
backgroundColor: "red",
height: 1,
bottom: "-8px",
left: "-32px"
},
"&:not($disabled):not($error):after": {
height: 2,
bottom: "-8px",
left: "-32px"
},
"&$error:before": {
height: 1,
bottom: "-8px",
left: "-32px"
},
"&$error:after": {
height: 1,
bottom: "-8px",
left: "-32px"
}
},
disabled: {},
error: {},
focused: {}
});
const CustomTextField = ({ classes, ...other }) => {
return <TextField InputProps={{ classes: classes }} {...other} />;
};
export default withStyles(styles)(CustomTextField);