Styling BottomNavigation in React.js Material-UI

Question

How do I change the color of the icon and text of the selected link (Home in this example) to red and the color of the icon and text of the inactive links (Course and Authors in this example) to green? The docs are very thin.

class MyBottomNavigation extends Component {

  render() {
    return (
      <Paper zDepth={1}>
        <BottomNavigation selectedIndex={this.state.selectedIndex}>

          <BottomNavigationItem
            label="Home"
            icon={recentsIcon}
          />

          <BottomNavigationItem
            label="Course"
            icon={favoritesIcon}
          />

          <BottomNavigationItem
            label="Authors"
            icon={nearbyIcon}
          />
        </BottomNavigation>
      </Paper>
    )
  }
}

export default MyBottomNavigation

Answer 1

An alternative, though similar solution:

If your element's colors are being defined by the theme (and we can see that they are, via @ryan-cogswell 's explanation above, or at this link available via the API), instead of overriding the styles, we can simply set a custom theme:

const navTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#00FF00'
        },
        text: {
            secondary: '#FF0000'
        }
    }
})

And wrap the navbar in a <ThemeProvider theme={navTheme}> tag set.

Note that, for the BottomNavigation element, the background color is not specified, so you'll still need to use custom styles to do that.

Answer 2

Since 5.* version is posible who your use sx props

Component BottomNavigation

<BottomNavigation
  sx={{
    bgcolor: 'purple',
    '& .Mui-selected': {
      '& .MuiBottomNavigationAction-label': {
        fontSize: theme => theme.typography.caption,
        transition: 'none',
        fontWeight: 'bold',
        lineHeight: '20px'
      },
      '& .MuiSvgIcon-root, & .MuiBottomNavigationAction-label': {
        color: theme => theme.palette.secondary.main
      }
    }
  }}
>
...
</BottomNavigation>