如何在 React 中将 CSS 子项如第 n 个元素和符号作为 CSS 模块传递？

问题描述

我的 React 组件中有这段代码

CSS

#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

并做出反应

    import React from 'react';
    
    const DrawerToggleButton = (props) => {
    return (
        <div id={props.styles.menuToggle} onClick={props.click}>
            

            <input type="checkBox" />
                <span className={props.styles.menuToggle__span}></span>
                <span className={props.styles.menuToggle__span}></span>
                <span className={props.styles.menuToggle__span}></span>

            <ul id="menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Info</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
        </div>
    );
};

    export default DrawerToggleButton;

现在，如果要为组件样式传递以下 css 类，

    #menuToggle input:checked ~ span:nth-last-child(3){
}

目前（我能想到的是）我可能可以通过提供单个类或 ID 来访问这些元素，但我认为它效率不高。如何有效地将这些子元素和 CSS 符号作为 css-module 传递？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）