在React.js Material-UI中设置BottomNavigation的样式 [英] 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

推荐答案

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

There are three separate sources of information for most Material-UI components:

• 组件演示
  • https://material-ui.com/components/bottom-navigation/
  • The Component Demos
    • https://material-ui.com/components/bottom-navigation/
    • https://material-ui.com/api/bottom-navigation/
    • https://material-ui.com/api/bottom-navigation-动作/
    • https://material-ui.com/api/bottom-navigation/
    • https://material-ui.com/api/bottom-navigation-action/

    源代码.指向该链接的链接将显示在API页面底部附近，例如

    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:

    • 规则名称为 classes对象prop .
    • 使用全局类名.
    • 具有主题和 overrides属性.
    • With a rule name of the classes object prop.
    • With a global class name.
    • With a theme and an overrides property.

    如果这还不够，您可以检查

    If that's not sufficient, you can check the implementation of the component for more detail.

    • 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
    • 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属性传递的类，以覆盖组件不同方面的样式.

    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.

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

    In this case the component we care about is BottomNavigationAction. In the CSS portion of the API documentation you'll find:

    root应用于根元素的样式.

    root Styles applied to the root element.

    selected应用于根元素的样式(如果已选择).

    selected Styles 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.

    下面是BottomNavigationAction样式的简化版本(我只包括了与控制这两种颜色有关的部分):

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

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

    Here are some additional resources here in Stack Overflow of some similar questions I've answered regarding other Material-UI components:

    • 使用React material-ui更改OutlinedInput的轮廓
    • 设置TextField高度material-ui
    • 如何将样式应用于JSS中的一个子类
    • Change outline for OutlinedInput with React material-ui
    • Set TextField height material-ui
    • How to apply styles to a child class in JSS

    这篇关于在React.js Material-UI中设置BottomNavigation的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！