在React.js Material-UI中设置BottomNavigation的样式

大多数Material-UI组件都有三个单独的信息源：

• 组件演示
  • https://material-ui.com/components/bottom-navigation/
• 组件和相关组件的API文档。相应的链接将出现在相应演示的底部。
  • https://material-ui.com/api/bottom-navigation/
  • https://material-ui.com/api/bottom-navigation-action/

• 源代码。指向它的链接将出现在API页面底部附近，例如

  您可以通过以下自定义点之一来覆盖组件的样式：

  • 带有classes对象prop的规则名称。
  • 具有全局类名。
  • 具有主题和overrides属性。

  如果这还不够，您可以检查组件的实现以获取更多详细信息。

  • 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

API文档中的每个组件文档都可以通过classes属性传递类，以覆盖组件不同方面的样式。

在这种情况下，我们关心的组件是BottomNavigationAction。在API文档的CSS部分中，您将找到：

root 应用于根元素的样式。

selected 如果选中，则应用于根元素的样式。

看到这个，您可以先尝试：

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

这几乎可以解决问题。无效的动作为绿色，但所选的动作为红色文本，但图标颜色不受影响。当样式不能按您预期的那样正常工作时，下一个要看的地方是源代码，以了解如何在组件中完成样式。

以下是BottomNavigationAction样式的简化版本（我仅包括与控制这两种颜色有关的部分）：

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: {},
});

如果我们根据覆盖结构的构造模型来覆盖，我们会找到成功。最终结果如下所示：

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);

这是我在Stack Overflow中获得的一些其他资源，这些资源已经回答了一些有关其他Material-UI组件的类似问题：

• 使用React material-ui更改OutlinedInput的轮廓
• 设置TextField的高度material-ui
• 如何在JSS中将样式应用于子类