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

时间:2019-01-26 02:11:07

标签: reactjs material-design material-ui material

如何将所选链接(在此示例中为“家”)的图标和文本的颜色更改为红色,而将非活动链接(在此示例中为“课程”和“作者”)的图标和文本的颜色更改为绿色? The docs are very thin.

enter image description here

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

2 个答案:

答案 0 :(得分:2)

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

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

Edit wq02759kk

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

答案 1 :(得分:0)

一种替代方法,尽管类似:

如果您的元素的颜色是由主题定义的(我们可以通过上面的@ ryan-cogswell的说明或通过API提供的this link看到它们的颜色),而不是覆盖样式,我们可以简单地设置自定义主题:

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

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

请注意,对于BottomNavigation元素,未指定背景色,因此您仍然需要使用自定义样式来实现。