Styling BottomNavigation in React.js Material-UI

问题

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

回答1:

There are three separate sources of information for most Material-UI components:

• The Component Demos
  • https://material-ui.com/components/bottom-navigation/
• The API documentation for the component and related components. The links for this will appear at the bottom of the corresponding demos.
  • https://material-ui.com/api/bottom-navigation/
  • https://material-ui.com/api/bottom-navigation-action/

• The source code. A link to this will appear near the bottom of the API page such as

  You can override the style of the component thanks to one of these customization points:

  • With a rule name of the classes object prop.
  • With a global class name.
  • With a theme and an overrides property.

  If that's not sufficient, you can check the implementation of the component for more detail.

  • https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/BottomNavigation/BottomNavigation.js
  • https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js

Each component documents within the API documentation the classes that you can pass in via the classes property to override styles for different aspects of the component.

In this case the component we care about is BottomNavigationAction. In the CSS portion of the API documentation you'll find:

root Styles applied to the root element.

selected Styles applied to the root element if selected.

Seeing this you might first try:

const styles = {
  root: {
    color: "green"
  },
  selected: {
     color: "red"
  }
};

And that almost does the trick. The inactive actions are green, but the selected action has red text, but the icon color was unaffected. When the styling doesn't work quite as you expected the next place to look is the source code to see how the styling is done in the component.

Below is a simplified version of the BottomNavigationAction styles (I've only included the parts relevant to controlling these two colors):

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.secondary,
    '&$selected': {
      color: theme.palette.primary.main,
    },
  },
  /* Styles applied to the root element if selected. */
  selected: {},
});

If we model our overrides off of how this is structured we find success. The final result looks like:

import React from "react";
import Paper from "@material-ui/core/Paper";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  root: {
    color: "green",
    "&$selected": {
      color: "red"
    }
  },
  selected: {}
};

class MyBottomNavigation extends React.Component {
  render() {
    const actionClasses = this.props.classes;
    return (
      <Paper zDepth={1}>
        <BottomNavigation value={1} showLabels={true}>
          <BottomNavigationAction
            classes={actionClasses}
            label="Home"
            icon={<RestoreIcon />}
          />

          <BottomNavigationAction
            classes={actionClasses}
            label="Course"
            icon={<FavoriteIcon />}
          />

          <BottomNavigationAction
            classes={actionClasses}
            label="Authors"
            icon={<LocationOnIcon />}
          />
        </BottomNavigation>
      </Paper>
    );
  }
}
export default withStyles(styles)(MyBottomNavigation);

Here are some additional resources here in Stack Overflow of some similar questions I've answered regarding other Material-UI components:

• Change outline for OutlinedInput with React material-ui
• Set TextField height material-ui
• How to apply styles to a child class in JSS

来源：https://stackoverflow.com/questions/54375096/styling-bottomnavigation-in-react-js-material-ui