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

Question

如何将所选 link（本例中为主页）的图标和文本颜色更改为红色，并将非活动 link 图标和文本的颜色更改为红色（本例中的课程和作者）到绿色？ 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 1

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

组件演示
- https://mui.com/components/bottom-navigation/
组件和相关组件的 API 文档。此链接将出现在相应演示的底部。
- https://mui.com/api/bottom-navigation/
- https://mui.com/api/bottom-navigation-action/
源代码
- 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。在 API 文档的 CSS 部分，您会发现：

root Styles applied to the root element.

selected Styles applied to the root element if 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 组件的一些类似问题：

Change outline for OutlinedInput with React material-ui
Set TextField height material-ui

Answer 2

另一种类似的解决方案：

如果您的元素的颜色是由主题定义的（我们可以看到它们是，通过@ryan-cogswell 上面的解释，或者在 this link 可通过 API 获得），而不是覆盖样式，我们可以简单地设置一个自定义主题：

const navTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#00FF00'
        },
        text: {
            secondary: '#FF0000'
        }
    }
})

并将导航栏包裹在 <ThemeProvider theme={navTheme}> 标签集中。

请注意，对于 BottomNavigation 元素，未指定背景颜色，因此您仍需要使用自定义样式来完成此操作。

Answer 3

因为 5.* version 是可能的 sx props

组件BottomNavigation

<BottomNavigation
  sx={{
    bgcolor: 'purple',
    '& .Mui-selected': {
      '& .MuiBottomNavigationAction-label': {
        fontSize: theme => theme.typography.caption,
        transition: 'none',
        fontWeight: 'bold',
        lineHeight: '20px'
      },
      '& .MuiSvgIcon-root, & .MuiBottomNavigationAction-label': {
        color: theme => theme.palette.secondary.main
      }
    }
  }}
>
...
</BottomNavigation>

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

Styling BottomNavigation in React.js Material-UI

reactjs

material-ui

jss