React.js Material-UI 中的 BottomNavigation 样式

如何将所选链接（本例中为主页）的图标和文本颜色更改为红色，并将非活动链接（本例中为课程和作者）的图标和文本颜色更改为绿色？文档非常薄。

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

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

• The Component Demos
  • https://mui.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://mui.com/api/bottom-navigation/
  • https://mui.com/api/bottom-navigation-action/
• The source code
  • https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/BottomNavigation/BottomNavigation.js
  • https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js

API 文档中的每个组件都记录了您可以通过以下方式传入的类：classes属性来覆盖组件不同方面的样式。

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

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

如果我们根据其结构来建模我们的覆盖，我们就会取得成功。如果使用的话，最终结果如下所示withStyles使用 MUI v4（下面是 v5 示例）：

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

这是 MUI v5 的等效示例，使用styled代替withStyles:

import React from "react";
import Paper from "@mui/material/Paper";
import BottomNavigation from "@mui/material/BottomNavigation";
import MuiBottomNavigationAction from "@mui/material/BottomNavigationAction";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import { styled } from "@mui/material/styles";

const BottomNavigationAction = styled(MuiBottomNavigationAction)(`
  color: green;
  &.Mui-selected {
    color: red;
  }
`);

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

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

          <BottomNavigationAction label="Authors" icon={<LocationOnIcon />} />
        </BottomNavigation>
      </Paper>
    );
  }
}
export default MyBottomNavigation;

以下是 Stack Overflow 中我回答过的有关其他 MUI 组件的一些类似问题的其他资源：

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