如何在样式化组件中使用类

Posted 2023-03-15

【中文标题】如何在样式化组件中使用类

【英文标题】：How to Use Classes in Styled-Component

【发布时间】：2019-07-29 13:10:57

【问题描述】：

我是样式组件的新手。我想将自定义 CSS 转换为 Styled-Component。我已经在React 文件中使用了className。

App.js

<div className="left-menus">
      menus.map(item => 
          return (
            <Link to=item.name name=item.name key=item.name
              className=this.state.activeMenu === item.name ? 'menu active' : 'menu' 
              onClick=() => this.setState( activeMenu: item.name )
              >
              <Icon name=item.icon size="large"/>
              <span>item.name</span>
            </Link>
          )
      )
    </div>

App.css

.left-menus 
  position: fixed;
  width: 200px;
  padding-right: 0 !important;
  background-color: #fff;
  height: 100%;
  margin-top: 20px;
  top: 47px;
  font-size: 12px !important;
  border-right: 2px solid #e8e8ec; 
  .left-menus .menu 
    color: #4a4a4a;
    width: 100%;
    display: block;
    cursor: pointer;
    text-transform: capitalize !important;
    padding: 15px 10px 15px 18px; 
    .left-menus .menu .angle.down.icon,
    .left-menus .menu .angle.up.icon 
      right: 10px;
      position: absolute; 
  .left-menus .menu .icon:first-child 
    margin-right: 10px; 
  .left-menus .menu.active 
    border-right: 4px solid #3cbfc8;
    background-color: #f8f8f8; 
  .left-menus .sub-menu-container .sub-menu 
    display: none;
    height: 0;
    transition: 0.3s all ease; 
  .left-menus .sub-menu-container.active .sub-menu 
    display: block;
    height: 100%;
    text-transform: capitalize;
    transition: 0.3s all ease; 
    .left-menus .sub-menu-container.active .sub-menu a 
      color: #4a4a4a; 
    .left-menus .sub-menu-container.active .sub-menu .icon 
      margin: 10px 10px 0 10px; 

【问题讨论】：

***.com/q/38545219/1531971 相关，如果不是重复的话。还有其他的。所以你应该展示你的研究。

仅从样式和维护的角度来看，您可能需要考虑摆脱像这样的深度嵌套的 CSS 树。您不一定需要带有样式组件的类名结构

【参考方案1】：

带有类选择器的 CSS 只会匹配属于类的元素。

要为一个样式化的组件提供该类，您需要在实例化它时进行。

例如：

const MyStyledComponent = styled.div`

背景：红色； `;

const myFunctionComponent = () => 
    const myClass = "left-menus";

    return(
        <div>
            Here is MyStyledComponent
            <MyStyledComponent className=myClass>
                Example
            </MyStyledComponent>
        </div>
    );

如果您有想要应用的现有样式表，则样式化组件很可能不是适合该工作的工具。