Javascript 如何覆盖 material-ui (React) 中的类和样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50831450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overwrite classes and styles in material-ui (React)
提问by Sandeep Chikhale
I'm using version 1.2.1 of material-uiand I'm trying to overwrite the AppBarcomponent to be transparent. The documentation outlines how to overwrite styles here.
我正在使用material-ui 的1.2.1 版，并且我正在尝试将AppBar组件覆盖为透明。该文档概述了如何在此处覆盖样式。
My code:
我的代码：
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;
But this yields no results. Am I trying to overwrite wrong? Not sure where I'm going wrong here...
但这不会产生任何结果。我是否试图覆盖错误？不知道我哪里出错了......
回答by Sandeep Chikhale
This answer makes @Nadun answer complete - he deserves the credit. To override material ui classes we need to understand these things:
这个答案使@Nadun 的答案变得完整——他值得称赞。要覆盖材质 ui 类，我们需要了解以下内容：
1. Add your styles in a const variable at the top
1. 在顶部的 const 变量中添加样式
const styles = {
root: {
backgroundColor: 'transparent !important',
boxShadow: 'none',
paddingTop: '25px',
color: '#FFFFFF'
}
};
2. We need to use higher order function with "withStyles" to override material ui classes
2.我们需要使用带有“withStyles”的高阶函数来覆盖材质ui类
export default withStyles(styles)(NavigationBar);
3.Now these styles are available to us as props in the render function
try doing this - console.log(this.props.classes)- you get a classes name correspoding to properties you include in styles object,
like - {root: "Instructions-root-101"}.
3.现在这些样式可以作为渲染函数中的道具使用，尝试这样做 - console.log(this.props.classes)- 你会得到一个类名，对应于你包含在样式对象中的属性，比如 - {root: "Instructions-root-101"}。
Add that with classes attribute
添加类属性
render() {
const { classes } = this.props;
return (
<AppBar classes={{ root: classes.root }}>
// Add other code here
</AppBar>
)
}
回答by Nadun
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);
find the important part as :
找到重要的部分：
backgroundColor: 'transparent !important'
refer this guide for more details: https://material-ui.com/customization/overrides/
有关更多详细信息，请参阅本指南：https: //material-ui.com/customization/overrides/
hope this will help you
希望能帮到你
