title: Styling BottomNavigation in React.js Material-UI
body: <p>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? <a href="https://material-ui.com/demos/bottom-navigation/" rel="noreferrer">The docs are very thin.</a></p>
  
  <p><a href="https://i.stack.imgur.com/M80Va.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M80Va.png" alt="enter image description here"></a></p>
  
  <pre><code>class MyBottomNavigation extends Component {
  
    render() {
      return (
        &lt;Paper zDepth={1}&gt;
          &lt;BottomNavigation selectedIndex={this.state.selectedIndex}&gt;
  
            &lt;BottomNavigationItem
              label="Home"
              icon={recentsIcon}
            /&gt;
  
            &lt;BottomNavigationItem
              label="Course"
              icon={favoritesIcon}
            /&gt;
  
            &lt;BottomNavigationItem
              label="Authors"
              icon={nearbyIcon}
            /&gt;
          &lt;/BottomNavigation&gt;
        &lt;/Paper&gt;
      )
    }
  }
  
  export default MyBottomNavigation
  </code></pre>