I'm pretty new to react and i've been at this for several hours, without much luck.

I'm trying to style the Tabs so the underline colour is white:

and also remove the onClick ripple:

I suspect it's something to do with overriding the classes: indicator but i'm not entirely sure how / why it works.

I've attached my code for clarity.

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);

I'm pretty new to react and i've been at this for several hours, without much luck.

I'm trying to style the Tabs so the underline colour is white:

and also remove the onClick ripple:

I suspect it's something to do with overriding the classes: indicator but i'm not entirely sure how / why it works.

I've attached my code for clarity.

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);

Any guidance / explanation on this will be much appreciated.

• javascript
• reactjs
• material-ui

2 Answers 2

For Material-UI Tabs, indicatorColor is an enum: 'secondary' | 'primary', but you can override it with classes or with TabIndicatorProps. See the Tabs API and the Customized Tabs Demo, or mui-org/material-ui/#11085 for further discussion on this topic.

Here is your example overriding the indicator with classes for a white underline color and showing how to disable the ripple (note the different withStyles import syntax):

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);

In REACT you must use className, not classes.

see this: https://reactjs/docs/faq-styling.html

You can also look at how they do it on Material-UI site:

https://material-ui./demos/tabs/

Also when styling in you might not get any errors and the styling will just not be applied. So sometimes it's tricky to troubleshoot.