反应材料-用户界面样式标签
我对此反应很新，我已经做了好几个小时了，运气不佳。
我试着把标签的样式设计成白色：
还消除了onClick波纹：
我怀疑这与重写类有关:指示器，但我不完全确定它是如何/为什么工作的。
为了清晰起见我附上了我的代码。
import React, {Component} from "react"
import AppBar from "@material-ui/core/AppBar/AppBar";
import Tabs from "@material-ui/core/Tabs/Tabs";
import Tab from "@material-ui/core/Tab/Tab";
import withStyles from "@material-ui/core/es/styles/withStyles";
const styles = {
AppBar: {
background: 'transparent',
boxShadow: 'none'
},
Indicator:{
ripple:{
color: 'blue'
},
backgroundColor: 'white',
}
};
class NavBar extends Component {
render() {
return (
<AppBar style={styles.AppBar}>
<Tabs classes={{ indicator: styles.Indicator}} centered value={0}>
<Tab label="Fairness"/>
<Tab label="Community" />
<Tab label="Referrals" />
<Tab label="How To Play" />
</Tabs>
</AppBar>
)
}
}
export default withStyles(styles)(NavBar);
对此，如有任何指导或解释，将不胜感激。
回答 2
Stack Overflow用户
发布于 2018-10-09 19:25:30
对于材质-UI Tabs，indicatorColor是一个enum: 'secondary' | 'primary'，但是您可以使用classes或TabIndicatorProps来覆盖它。有关此主题的进一步讨论，请参阅制表符API和定制Tabs演示，或梅-org/资料-ui/#11085。
下面是用indicator重写classes的白色下划线颜色的示例，并展示了如何禁用波纹(注意不同的withStyles导入语法)：
import React, { Component } from "react";
import AppBar from "@material-ui/core/AppBar/AppBar";
import Tabs from "@material-ui/core/Tabs/Tabs";
import Tab from "@material-ui/core/Tab/Tab";
import { withStyles } from "@material-ui/core/styles/";
const styles = theme => ({
indicator: {
backgroundColor: "white"
}
});
class NavBar extends Component {
render() {
const { classes } = this.props;
return (
<AppBar style={styles.AppBar}>
<Tabs classes={{ indicator: classes.indicator }} centered value={0}>
<Tab disableRipple label="Fairness" />
<Tab disableRipple label="Community" />
<Tab label="Referrals" />
<Tab label="How To Play" />
</Tabs>
</AppBar>
);
}
}
export default withStyles(styles)(NavBar);
Stack Overflow用户
发布于 2018-10-09 18:33:16
在REACT中，您必须使用className，而不是类。
参见：https://reactjs.org/docs/faq-styling.html
你也可以看看他们是如何在资料用户界面网站上这样做的：
https://material-ui.com/demos/tabs/
另外，当样式化在您可能不会收到任何错误，样式将只是不应用。因此，有时要排除故障是很棘手的。
https://stackoverflow.com/questions/52726869
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号