如何在Styled-Component中使用类

Question

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

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; }

Answer 1

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

要为类型提供样式化组件，您需要在实例化它时执行此操作。

例如：

const MyStyledComponent = styled.div`

背景：红色; `;

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

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

如果您要应用现有样式表，则样式化组件可能不适合该作业。