web-dev-qa-db-ja.com

マテリアル-UIスタイルのオーバーライド？

アプリをMaterial-UIv1から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>
    );
}

...しかし、Webページに表示される新しい色はまだ取得されていません。

material-uijss
5
VikR

更新されたソリューションは良さそうです。小さな変更がいくつかあります...

  1. スタイルルールに空の_.selected_クラスを含める必要があります。
_const styles = {
  // Root styles for `BottomNavigationAction` component
  actionItemStyles: {
    "&$selected": {
      color: "red"
    }
  },
  // This is required for the '&$selected' selector to work
  selected: {}
};
_
  1. _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>
_

実例：

Edit Material UI ButtonNavigationAction styles

2
Luke Peavey

私が提案したいことがいくつかあります。

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"
        },
    },
};
0
Lazar Nikolic