css - 样式 react material-ui 选项卡

Question

我刚开始使用 Reacts material-ui我想自定义一些样式。例如更改标签背景颜色。

尝试使用内联样式

喜欢

<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,

          }
        }
    }

更改标签内容区域但不更改标题。

here我们有一些颜色属性我们如何使用它？在这种情况下，文档没有给出示例。

我该如何继续？

Answer 1

我这样做的方法是覆盖 <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 提供更多属性，以便我们可以对其进行自定义。