☰

ホバー/アクティブ時にマテリアル UI リストアイテムの子を変更する 質問する

tag-icon • tag-icon reactjs material-ui
ホバー/アクティブ時にマテリアル UI リストアイテムの子を変更する 質問する

サイドバー ナビゲーションの次のコンポーネント構造を検討してください。

<ListItem button dense component={CustomNavLink} to="/dashboard">
    <ListItemIcon>
        <DashboardIcon />
    </ListItemIcon>
    <ListItemText primary="Dashboard" />
</ListItem>

タスクは、ホバー時または がアクティブになったときに と の外観ListItemIconを変更することです。ListItemTextCustomNavLink

は、現在のルートと一致したときにクラスが適用される、CustomNavLink拡張された React RouterNavLinkコンポーネントであることに注意してください。active

次のややハッキーな方法は、classesプロパティを介してこれを実現します (わかりやすくするために短縮および簡略化されています)。

const styles =  {
    root: {
        ...
        '&.active, &:hover, &.active:hover': {
            '& path': {
                fill: 'red'
            },
            '& span': {
                color: 'red'
            }
        }
    }
};

（classesその後ListItemコンポーネントに適用されます）

これは、ネストされたコンポーネントの構造が親のスタイルに漏れてしまうため、非常にまずい方法のように思えます。これは、「古い」CSS でこれを行うのに似ています。

div:hover > ul > li > a {
    color: red;
}

これを解決するための慣用的な Material-UI の方法は何ですか?

参考までに、次のように実行しますstyled-components。

const CustomNavLink = styled(NavLink)`
    ...
    &:hover {
        ${ListItemIcon} {
            path: {
                fill: red;
            }
        }

        ${ListItemText} {
            color: red;
        }
    }
`;

ベストアンサー1

ホバー/アクティブ時にマテリアルUIリストアイテムの子を変更するには、次の例を試してください。

const wrapperStyles = {
  parent: {
    backgroundColor: 'yellow',
    '&:hover $child': {
      color: 'red'
    }

  },
  child: {
    fontSize: '2em',
    padding: 24
  }
}

おすすめ記事