[英]Styling reacts material-ui tabs
我刚开始使用 reacts material-ui ,我想自定义一些样式。 例如更改标签的背景颜色。
尝试使用 inlineStyle
喜欢
<Tabs style={this.getStyles().tabs} > </Tabs>
getStyles(){
return {
tabs: {
backgroundColor: Colors.teal200
},
headline: {
fontSize: '24px',
lineHeight: '32px',
paddingTop: '16px',
marginBottom: '12px',
letterSpacing: '0',
fontWeight: Typography.fontWeightNormal,
color: Typography.textDarkBlack,
}
}
}
更改选项卡内容区域但不更改标题。
这里我们有一些颜色属性我们如何使用呢? 在这种情况下,文档没有给出示例。
我该如何进行?
我这样做的方式是覆盖<Tab>
样式(如果您有受控的选项卡)
render: function() {
var styles = {
default_tab:{
color: Colors.grey500,
backgroundColor: Colors.grey50,
fontWeight: 400,
},
active_tab:{
color: Colors.deepOrange700,
}
}
styles.tab = []
styles.tab[0] = styles.default_tab;
styles.tab[1] = styles.default_tab;
styles.tab[2] = styles.default_tab;
styles.tab[this.state.slideIndex] = objectAssign({}, styles.tab[this.state.slideIndex], styles.active_tab);
return (
<Tabs>
<Tab style={styles.tab[0]} label="Tab 0" value="0" />
<Tab style={styles.tab[1]} label="Tab 1" value="1" />
<Tab style={styles.tab[2]} label="Tab 2" value="2" />
</Tabs>
)
虽然我认为更好的方法是为 Tabs/Tab 提供更多的道具,以便我们可以自定义它。
所以如果有人会面临同样的情况,这就是我发现的
使用ThemeManager我们可以更改样式输出
例如
ThemeManager.setTheme(ThemeManager.types.DARK);
使用setPalette
更改特定的样式变量
componentWillMount() {
ThemeManager.setPalette({
accent1Color: Colors.indigo50,
primary1Color: "#474B4E",
primary2Color: "#2173B3",
primary3Color: "#A9D2EB",
accent1Color: "#ED3B3B",
accent2Color: "#ED2B2B",
accent3Color: "#F58C8C"
});
}
自定义组件最方便的方法是使用className
属性简单地应用普通的旧 CSS,因为提供的style
属性的功能相当有限。
让我们考虑一个简单的例子:
const MyAwesomeTabContainer = () => (
<Tabs className="tabs-container">
<Tab icon={<Person />} className="tab" />
<Tab icon={<Content />} className="tab" />
</Tabs>
);
以下LESS代码(不是 CSS!)将允许您根据需要自定义样式:
.tabs-container {
>div:first-child { // modifies the background color
background-color: #f6f6f6 !important;
}
>div:last-child { // changes the distance between tabs and content
margin-top: 10px;
}
.tab {
>div>div { // modifies the font size of the tab labels
font-size: 10px;
svg { // modifies the color of SVG icons
fill: #626262 !important;
}
}
}
}
不幸的是,有必要应用一些!important
语句,因为组件的样式信息是在代码中内联设置的。
对于 MUI(Material-UI V5),我想为选项卡添加框阴影,使其看起来像这样
您可以使用“组件”属性来传递 elementType。 用于根节点的组件。 使用 HTML 元素或组件的字符串。 我使用了“盒子”组件:
import { Box } from '@mui/material';
...
<Tabs
value={selectedTab}
component={Box}
boxShadow={3}
onChange={changeSelectedTab}
variant="fullWidth"
>
所以现在我可以使用所有的 Box 组件属性,比如“boxShadow”。 我认为使用其他 MUI 组件的属性进行样式设置更加简洁。仅在“内联警告”时要小心https://mui.com/material-ui/guides/composition/#component-prop
我想要一个在活动选项卡上的课程,所以这里有一个快速的解决方案:
<Tabs className="pcd-tabs" onChange={this.handleChange}>
<Tab className="pcd-tab pcd-tab0 pcd-tab-active" label="Chart" value={0} />
<Tab className="pcd-tab pcd-tab1" label="Series" value={1} />
</Tabs>
比
handleChange = (value) => {
document.getElementsByClassName('pcd-tab-active')[0].classList.remove('pcd-tab-active');
document.getElementsByClassName('pcd-tab' + value)[0].classList.add('pcd-tab-active');
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.