Как использовать классы в Styled-Component - PullRequest
Новая
       22

Как использовать классы в Styled-Component

1 голос
/ 07 марта 2019

Я новичок в styled-компоненте.Я хочу конвертировать пользовательский 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; }

1 Ответ

0 голосов
/ 07 марта 2019

CSS с селектором класса будет соответствовать только элементам, которые являются членами класса.

Чтобы дать стилизованному компоненту этот класс, вы должны сделать это при его создании.

Дляпример: 

const MyStyledComponent = styled.div`

фон: красный;`; 

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

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

Если у вас есть существующая таблица стилей, которую вы хотите применить, вполне вероятно, что стилизованные компоненты не являются подходящим инструментом для работы.

...