如何在 material-ui (React) 中覆盖(覆盖)类和样式

Question

我正在使用 material-ui 的 1.2.1 版，我正在尝试覆盖 AppBar 组件以使其透明。文档在此处概述了如何覆盖样式。

我的代码：

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';
class NavigationBar extends Component {
render() {
const styles = {
root: {
backgroundColor: 'transparent',
boxShadow: 'none',
},
};
return (
<AppBar position={this.props.position} classes={{ root: styles.root }}>
<Toolbar>
<img src={logo} style={{ height: '28px' }} />
</Toolbar>
</AppBar>
);
}
}
export default NavigationBar;

但这不会产生任何结果。我试图覆盖错误吗？不知道我在这里哪里出错了...

Answer 1

这个答案使@Nadun答案完整——他配得上荣誉。 要覆盖材料 UI 类，我们需要了解以下内容：

1. 在顶部的常量变量中添加样式

const styles = {
root: {
backgroundColor: 'transparent !important',
boxShadow: 'none',
paddingTop: '25px',
color: '#FFFFFF'
}
};

2.我们需要使用带有"withStyles"的高阶函数来覆盖材质 UI 类

export default withStyles(styles)(NavigationBar);

3.现在这些样式可以作为渲染函数中的道具提供给我们 尝试这样做 -console.log(this.props.classes)- 你会得到一个类名，对应于你包含在样式对象中的属性， 喜欢 -{root: "Instructions-root-101"}.

使用类属性添加它

render() {
const { classes } = this.props;
return ( 
<AppBar classes={{ root: classes.root }}>
// Add other code here
</AppBar>
)
}

Answer 2

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';
import { withStyles } from '@material-ui/core/styles';
const styles = {
transparentBar: {
backgroundColor: 'transparent !important',
boxShadow: 'none',
paddingTop: '25px',
color: '#FFFFFF'
}
};
class NavigationBar extends Component {
render() {
return (
<AppBar className={classes.transparentBar}>
<Toolbar>
<img src={logo} style={{ height: '28px' }} />
</Toolbar>
</AppBar>
);
}
}
export default withStyles(styles)(NavigationBar);

找到重要的部分作为：

backgroundColor: 'transparent !important'

有关更多详细信息，请参阅本指南：https://material-ui.com/customization/overrides/

希望这对你有帮助

Answer 3

除了上面的答案之外，如果你想为一些内部自动生成的元素添加样式，你可以使用这个语法来做到这一点

<TextField className={classes.txtField}

然后在类对象中，我们可以通过以下方式接近 TextField 中存在的标签

const useStyles = makeStyles((theme) => ({
txtField: {
"& label": {
padding: 23
}
}
});

Answer 4

import ...;
import { withStyles } from '@mui/styles';
const styles = {
transparentBar: {
backgroundColor: 'transparent !important',
boxShadow: 'none',
paddingTop: '25px',
color: '#FFFFFF'
}
};
function NavigationBar (props) {
const { classes } = props;
return (
<AppBar className={classes.transparentBar}>
<Toolbar>
<img src={logo} style={{ height: '28px' }} />
</Toolbar>
</AppBar>
);
}
export default withStyles(styles)(NavigationBar);

它对我有用。

注意！ 更新 MUI 核心版本

Answer 5

材质 UI v5 覆盖样式 我的方法：

索引.js

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from '@mui/material/styles';
import App from './containers/App';
import theme from './style/theme';
render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.getElementById('root')
);

主题.js 它将全局覆盖样式。仅适用于您在 theme.js 文件中描述的那些组件

import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: '#009BDF',
},
secondary: {
main: '#14568D',
},
error: {
main: '#FF0000',
},
},
typography: {
fontFamily: 'Rubik Light, Helvetica, Arial, sans-serif',
},
components: {
MuiAccordion: {
styleOverrides: {
root: {
marginBottom: '5px',
borderRadius: '0.6rem',
boxShadow: 'none',
},
},
},
MuiAccordionSummary: {
styleOverrides: {
root: {
background: '#14568D',
borderRadius: '4px',
content: {
margin: '0px',
},
},
},
},
MuiAccordionDetails: {
styleOverrides: {
root: {
background: '#DEF1F9',
borderBottomLeftRadius: '4px',
borderBottomRightRadius: '4px',
},
},
},
MuiTooltip: {
styleOverrides: {
tooltip: {
backgroundColor: '#FFFFFF',
color: '#2f343D',
border: '1px solid',
fontSize: '1rem',
padding: '3px 20px',
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
background: '#EFF8FC',
},
},
},
},
});