css 모듈에 클래스를 네스트하고 어떻게 반응합니까?

css 모듈에 클래스를 네스트하고 어떻게 반응합니까?

리액트 프로젝트에서 CSS 모듈을 사용하려고 합니다.문제의 첫 번째 부분은 (sass를 사용하여) 네스트된 css 클래스를 작성하면 내부 클래스에도 접근할 수 있는지 알 수 없다는 것입니다.이러한 클래스명도 하나의 클래스명으로 컴파일 되어 있는 것 같기 때문입니다.일부 코드:

<div className={this.state.visible ? styles.header+" menu-visible" : styles.header}>
    <div className="menu">
        <a className="link">title</a>
    </div>
</div>

.header {
    &.menu-visible {
        .menu {
            display: block;
        }
    }
}

래핑 클래스는 모든 아이의 속성을 변경하는 "메뉴 표시"로 되어 있는데, 리액트에서 이렇게 하는 것은 잘못된 행동인가요?

.header 내부에는 메뉴가 보이면 변경되는 클래스가 여러 개 있기 때문에, 래핑 클래스만 변경하는 것이 편리합니다만, 아이를 참조할 수 있을까요?scss에 중첩된 상태를 유지하려면?

편집

className="menu"를 className={styles로 대체하는 방법이 있습니다.header.menu}는 정상적으로 동작하지 않는 것 같습니다.문제는 부모에 클래스 메뉴가 표시되어 있는 경우 .menu의 속성을 변경하고 싶다는 것입니다.

한 것 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★styles.header.menu 냥냥쓸 i i라고 돼요.styles.menu(일부러)

예(React + JSX):

<div className={styles.header}>
  <div className={styles.menu}>
      Whatever
  </div>
</div>

.header {
   .menu {
      display: block;
   }
 }

을 보다 잘할 수 있는 솔루션은 글로벌 인 '스케이프'를 입니다.:global, 할 수 있습니다.

.header {
  :global {
    .menu {
      display: none;

      &.menu-visible {
        display:block;
      }
    }
  }
}

<div className={styles.header}>
  <div className="menu menu-visible">
      Whatever
  </div>
</div>

[ class ~ = classname ]를 사용할 수 있습니다.

.header {
   [class~=menu] {
      display: block;
   }
 }

클래스로서 검출되지 않고, 방치됩니다.

승인된 답변의 솔루션은 딥 네스트 실렉터 시 css 번들사이즈를 크게 증가시킬 수 있습니다.

1레벨의 네스팅이 추가되어 인정된 솔루션

JSX:

<div className={styles.header}>
  <ul className={styles.menu}>
    <li className={styles.item}>
      Whatever
    </li>
  </ul>
</div>

SCSS:

.header {
   .menu {
      .item {
        display: block;
      }
   }
 }

출력(css 모듈의 디폴트 설정을 전제로 함):

.myComponent_header__27ep6 .myComponent_menu__32Qvy  .myComponent_item__2RWLN {
  display: block
}

대체 솔루션

BEM 방법론에 느슨하게 차용하여 부모 셀렉터를 사용하는 것이 좋습니다.

JSX:

<div className={styles.header}>
  <ul className={styles.headerMenu}>
    <li className={styles.headerMenuItem}>
      Whatever
    </li>
  </ul>
</div>

SCSS:

.header {
   &Menu {
     &Item {
       display: block;
     }
   }
 }

출력:

.myComponent_headerMenuItem__37djq { display: block }

도움이 될지는 모르겠지만, 다음과 같은 방법을 찾았습니다.

file: 패키지.json

"dependencies": {
  ...,
  "sass": "^1.49.9"
}

파일: test.scss

.box {
    width: 100%;
}

.boxItem {
    background: red;

    &.first {
        background: blue;
    }

    &.second {
        background: silver;
    }
}

파일 test.display

import React from 'react'
import styles from "./test.scss";

const test = () => {
  return (
    <div className={`${styles.box}`}>
      <div className={`${styles.boxItem} ${styles.first}`}>Test 01</div>
      <div className={`${styles.boxItem} ${styles.second}`}>Test 02</div>
      <div className={`${styles.boxItem}`}>Test 03</div>
    </div>
  );
};

내보내기 디폴트테스트

언급URL : https://stackoverflow.com/questions/40905309/how-to-nest-classes-in-css-modules-and-react