无法删除边框底部

Question

I am trying to custom style the React mui tabs in order to accomplish something like this:

I have tried to set the box-shadow to the selected tab and remove the border-bottom. Setting box-shadow worked, but removing border-bottom didn't. This is the styles object:

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  selected: {
    boxShadow: theme.shadows[1]
  },
  tab: {
    border: "none"
  }
});

And this is how my tab looks like:

   <Tab
     label="Item One"
     classes={{ selected: classes.selected, root: classes.tab }}
   />

You can see the whole example here .

How am I suppose to remove that border on selected tab? On expecting the element in the console I can't even see where the border is coming from.

Answer 1

I've just found indicatorColor Props

<Tabs indicatorColor={""} value={value} onChange={this.handleChange}> </Tabs>

Ref: https://material-ui.com/api/tabs/

Answer 2

You can simply set the element that is being used for that to display: none; :

<style>
  .MuiTabs-indicator {
    display: none;
  }
</style>