React.js Material-UI 中的底部导航样式

Posted 2023-02-22

【中文标题】React.js Material-UI 中的底部导航样式

【英文标题】：Styling BottomNavigation in React.js Material-UI

【发布时间】：2019-06-19 20:49:57

【问题描述】：

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

对于大多数 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 应用于根元素的样式。

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

这是一个使用 styled 而不是 withStyles 的 MUI v5 的等效示例：

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 How to apply styles to a child class in JSS

【讨论】：

这是针对 v5 mui.com/styles/basics 的已弃用解决方案吗？

@IvailoBardarov 我添加了一个 v5 示例。

【参考方案2】：

另一种虽然类似的解决方案：

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

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

并将导航栏包装在<ThemeProvider theme=navTheme> 标记集中。

请注意，对于BottomNavigation 元素，没有指定背景颜色，因此您仍然需要使用自定义样式来执行此操作。