我使用的是 material-ui 的 1.2.1 版我正在尝试覆盖 AppBar组件要透明。该文档概述了如何覆盖样式 here .
我的代码:
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;
但这不会产生任何结果。我是否试图覆盖错误?不确定我哪里出错了...
最佳答案
这个回答使@Nadun 的回答变得完整——他值得称赞。 要覆盖 Material ui 类,我们需要了解以下内容:
<强>1。在顶部的 const 变量中添加您的样式
const styles = {
root: {
backgroundColor: 'transparent !important',
boxShadow: 'none',
paddingTop: '25px',
color: '#FFFFFF'
}
};
2。 我们需要使用带有“withStyles”的高阶函数来覆盖 Material ui 类
export default withStyles(styles)(NavigationBar);
3. 现在这些样式在 render 函数中作为 props 提供给我们
尝试这样做 - 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>
)
}
关于javascript - 如何覆盖(overwrite)material-ui(React)中的类和样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50831450/