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
Answer
There are three separate sources of information for most Material-UI components:
- The Component Demos
- The API documentation for the component and related components. The links for this will appear at the bottom of the corresponding demos.
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
classesobject prop. - With a global class name.
- With a theme and an
overridesproperty.
If that's not sufficient, you can check the implementation of the component for more detail.
- With a rule name of the
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:
rootStyles applied to the root element.
selectedStyles 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: