Change color for tabs

[kakariko-village]

Hi, i want to change the text color of tab label but it seem impossible with inline CSS:

export default class App extends React.Component {
  render() {
      return (
       <div style={{ color: '#fff', width: '100%', margin: 'auto', textAlign: 'center' }}>
          <Tabs onChange={this.onChange} initialSelectedIndex={1} style={{ color: '#fff' }}>
            <Tab value='pane-1' label='Tab 1' onActive={this.onActive} style={{ color: '#fff' }} />
            <Tab value='pane-2' label='Tab 2' style={{ color: '#fff' }} />
          </Tabs>
        </div>
      );
  }
}

[amorey]

@kakariko-village Currently the <Tab/> element doesn't support inline CSS. If we add support for the label text color then specifying the color of the tab bottom border with inline CSS would be less straightforward since it's on a different DOM element. Have you tried customizing the SCSS? This should work (assuming you're using bower):

// import MUI colors
@import "bower_components/mui/src/sass/mui/colors";

// customize MUI variables
$mui-tab-font-color: $mui-base-font-color;
$mui-tab-font-color-active: $mui-primary-color;
$mui-tab-border-color-active: $mui-primary-color;

// import MUI SASS
@import "bower_components/mui/src/sass/mui";