React CSS 가져 오기 구성 요소 범위 지정 방법? ,

Question

나는 다음과 같은 CSS/컴포넌트 구조

About/style.css

.AboutContainer { 
    # Some style 
} 

p > code { 
    # Some style 
} 

이 여러 구성 요소가 그리고

About/index.js

import './style.css'; 

export default class About extends Component { 
    render() { 
     # Return some component 
    } 
} 

그러나 다음과 같이 나는 componet에 CSS를 가져 CSS는 <header> 섹션에서 가져오고 전역 범위를 유지합니다.

나는 CSS가 될 것으로 예상했다 :

1. 스타일 만 에만이 구성 요소 내에서 렌더링 된 것들에 적용하는 방식으로 구성 요소는 범위의.
2. 구성 요소가 마운트 해제 된 경우이 구성 요소의 스타일이 사라집니다.

그러나, 브라우저에서 검사 할 때 스타일은 <header> 섹션에서 지정 및 구성 요소 범위의 수

<header> 
    // Stuff 
    <style type="text/css">style for component About</style> 
    <style type="text/css">style for component B</style> 
    <style type="text/css">style for component C</style> 
    // Stuff 
</header> 

는 어떻게 CSS를 가져 옵니까 모든 구성 요소에 적용됩니다? React ES6에서 CSS 가져 오기를 잘못 이해하고있는 것 같습니다.

나는 브렛에 의해 this tutorial

---

편집

대답을 다음되었다 맞습니다. 그러나, 내 문제는 다른 곳에서 밝혀졌습니다. 나는 기본적으로 React를하는 데 필요한 설정을 단순화하는 create-react-app을 사용하여 내 앱을 만들었습니다. WebPack, Babel 및 다른 것들을 포함합니다. 기본 WebPack 구성은 css-loader에 대해 module option을 설정하지 않았으므로 기본값은 false이며, 결과적으로 local-scoping이 활성화되지 않았습니다.

추가 정보를 얻으려면 create-react-app에는 WebPack 구성을 사용자 정의하는 간단한 방법이없는 것 같지만 웹에서 다양한 방법으로 해결 방법이있는 것 같습니다.

Answer 1

CSS Modules은 원하는대로 작동합니다.

CSS 모듈은 모든 클래스 이름과 애니메이션 이름이 기본적으로 로컬로 범위가 지정된 CSS 파일입니다. 모든 URL (url (...)) 및 @imports는 모듈 요청 형식입니다. (./xxx 및 ../xxx는 relative를 의미하고 xxx 및 xxx/yyy는 modules 폴더에서, 즉 node_modules에서를 의미합니다.)

.button { 
    border-radius: 3px; 
    background-color: green; 
    color: white; 
} 

는 CSS 모듈은 그것의 실행 후 다음의 ./styles/button.css에

import React from 'react'; 
import styles from './styles/button.css'; 

class Button extends React.Component { 
    render() { 
    return (
     <button className={styles.button}> 
     Click Me 
     </button> 
    ); 
    } 
} 
export default Button; 

일부 CSS :

하는의 우리가 같은 반작용 구성 요소가 있다고 가정 해 봅시다 : 여기

빠른 예제 매직 생성 된 CSS는 다음과 같습니다 :

.button_3GjDE { 
    border-radius: 3px; 
    background-color: green; 
    color: white; 
} 

여기서 _3DjDE은 임의로 생성 된 해시로 CSS 클래스에 고유 한 이름을 부여합니다.

대안

간단한 대안

는 일반적인 선택기를 사용하지 마십시오 (같은 p, code 등) 및 구성 요소와 요소에 대한 클래스 기반 이름 지정 규칙을 채택하는 것입니다. BEM과 같은 컨벤션조차도 여러분이 마주 치는 충돌을 예방하는 데 도움이됩니다.

.aboutContainer { 
    # Some style 
} 

.aboutContainer__code { 
    # Some style 
} 

은 기본적으로 당신이 스타일에 필요한 모든 요소가 고유의 클래스 명을받을 것이다 : 당신의 예를 들어이 적용

는

, 당신은 갈 수 있습니다.