Material-UI 样式覆盖？答案

【问题标题】：Material-UI Style Override?Material-UI 样式覆盖？
【发布时间】：2019-03-07 05:30:07
【问题描述】：

我正在将我的应用从 Material-UI v1 更新到 v2。我正在尝试使用样式覆盖来设置选定<BottomNavigationAction> 元素的颜色。

const styles = {
    bottomNavStyle: {
        position: 'fixed',
        left: '0px',
        bottom: '0px',
        height: '50px',
        width: '100%',
        zIndex: '100'
    },
    '&$selected': {
        color: "#00bcd4"  //<==trying to add this color to selected items
    },
};


class bottom_nav extends Component {
    state = {
        selectedIndex: -1,
    };

    handleChange = (event, value) => {
        this.setState({value});
    };


    render() {
        const { classes } = this.props;

        return (
            <Paper className={classes.bottomNavStyle}>
                <BottomNavigation
                    value={this.props.selectedBottomNavIndex}
                    onChange={this.handleChange}
                    showLabels
                 >
                    <BottomNavigationAction
                        label="Appointments"
                        icon={theApptsIcon}
                    />
                    <BottomNavigationAction
                        label="Contacts"
                        icon={theEmailIcon}
                    />
                    <BottomNavigationAction
                        label="Video Call"
                        icon={theVideoCall}
                    />
                </BottomNavigation>
            </Paper>
        );
    }
}

export default withStyles(styles)(bottom_nav);

但是，这对 selected 项目的颜色没有任何影响。

我已经阅读了关于 JS 和 JSS 中 CSS 的 Material-UI 文档，但还没有完全理解。正确的语法是什么？

更新

根据对这个帖子的回复，我试过这个：

const styles = {
    bottomNavStyle: {
        position: 'fixed',
        left: '0px',
        bottom: '0px',
        height: '50px',
        width: '100%',
        zIndex: '100'
    },
    actionItemStyle: {
        '&$selected': {
            color: "#00bcd4 !important"
        },
    },
}

[.....]

    return (
        <Paper className={classes.bottomNavStyle}>
            <BottomNavigation
                value={this.props.selectedBottomNavIndex}
                onChange={this.handleChange}
                showLabels
            >
                <BottomNavigationAction
                    label="Appointments"
                    icon={theApptsIcon}
                    className={classes.actionItemStyle}
                />
                <BottomNavigationAction
                    label="Contacts"
                    icon={theEmailIcon}
                    className={classes.actionItemStyle}
                />
                <BottomNavigationAction
                    label="Video Call"
                    icon={theVideoCall}
                    className={classes.actionItemStyle}
                />
            </BottomNavigation>
        </Paper>
    );
}

...但尚未让新颜色出现在网页上。

【问题讨论】：

标签： material-ui jss

【解决方案1】：

您更新后的解决方案看起来不错，只是做了一些小改动......

您需要在样式规则中包含一个空的.selected 类。

const styles = {
  // Root styles for `BottomNavigationAction` component
  actionItemStyles: {
    "&$selected": {
      color: "red"
    }
  },
  // This is required for the '&$selected' selector to work
  selected: {}
};

您需要将classes={{selected: classes.selected}} 传递给BottomNavigationAction。这是'&$selected' 选择器工作所必需的。

<BottomNavigation
  value={value}
  onChange={this.handleChange}
  className={classes.root}
>
  <BottomNavigationAction
    classes={{
      root: classes.actionItemStyles,
      selected: classes.selected
    }}
    label="Recents"
    value="recents"
    icon={<RestoreIcon />}
  />
</BottomNavigation>

实例：

【讨论】：

【解决方案2】：

我想建议几件事。

1) 将组件的名称以首字母大写，因为如果以小首字母和大写命名，则不会以相同的方式处理。

2) 如果没有其他方法可以应用您的 cs 规则，如果由于某些 css 特殊性而总是被覆盖，请在规则末尾使用 !iportant。

3) 试试这种在 jss 中嵌套 css 的方式：

const styles = {
    bottomNavStyle: {
        position: 'fixed',
        left: '0px',
        bottom: '0px',
        height: '50px',
        width: '100%',
        zIndex: '100',
        '&:selected': {
           color: "#00bcd4"
        },
    },
};

【讨论】：