CSS 样式反应 material-ui 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31839175/
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
Styling reacts material-ui tabs
提问by fefe
I just started to use reacts material-uiand I would like to customize some styles. For example changing tabs background color.
刚开始用reacts material-ui，想自定义一些样式。例如更改标签背景颜色。
trying to use inlineStyle
尝试使用 inlineStyle
like
喜欢
<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,
}
}
}
changes tabs content area but not the header.
更改选项卡内容区域但不更改标题。
herewe have some color attributes how we use it? The Docs gives no examples in this case.
这里我们有一些颜色属性，我们如何使用它？在这种情况下，文档没有给出任何示例。
How do I proceed?
我该如何进行？
采纳答案by yuchien
The way I do it is to override the <Tab>style (if you have a controlled Tabs)
我这样做的方法是覆盖<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>
)
Though I think the better way is to have more props for Tabs/Tab so we can customize it.
虽然我认为更好的方法是为 Tabs/Tab 设置更多道具，以便我们可以对其进行自定义。
回答by fefe
So if anybody would face the same here is what I found
所以如果有人会面临同样的情况，这就是我发现的
with ThemeManagerwe can change style outputs
使用 ThemeManager我们可以改变样式输出
for example
例如
ThemeManager.setTheme(ThemeManager.types.DARK);
changing specific style variables with setPalette
更改特定的样式变量 setPalette
componentWillMount() {
ThemeManager.setPalette({
accent1Color: Colors.indigo50,
primary1Color: "#474B4E",
primary2Color: "#2173B3",
primary3Color: "#A9D2EB",
accent1Color: "#ED3B3B",
accent2Color: "#ED2B2B",
accent3Color: "#F58C8C"
});
}
回答by Dennis
The most convenient way to customize the component is to simply apply plain old CSS by using the classNameattribute, since the capabilities of the provided styleattributes are fairly limited.
自定义组件最方便的方法是通过使用className属性简单地应用普通的旧 CSS ，因为提供的style属性的功能相当有限。
Let's consider a straight forward example:
让我们考虑一个简单的例子：
const MyAwesomeTabContainer = () => (
<Tabs className="tabs-container">
<Tab icon={<Person />} className="tab" />
<Tab icon={<Content />} className="tab" />
</Tabs>
);
The following LESScode (not CSS!) would allow you to customize the style according to your needs:
以下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;
}
}
}
}
Unfortunately it is necessary to apply a few !importantstatements because the style information of the component is set inline in code.
不幸的是，有必要应用一些!important语句，因为组件的样式信息是在代码中内联设置的。
回答by kakaja
I wanted a class on the active tab, so here is a quick solution for that:
我想在活动选项卡上开设一个课程，因此这里有一个快速解决方案：
<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>
than
比
handleChange = (value) => {
document.getElementsByClassName('pcd-tab-active')[0].classList.remove('pcd-tab-active');
document.getElementsByClassName('pcd-tab' + value)[0].classList.add('pcd-tab-active');
};
