React CSS가 컴포넌트 범위를 Import하도록 하는 방법

React CSS가 컴포넌트 범위를 Import하도록 하는 방법

다음과 같은 CSS/컴포넌트 구조를 가진 컴포넌트가 몇 개 있습니다.

About/style.css

.AboutContainer {
    # Some style
}

p > code {
    # Some style
}

그리고 CSS를 다음과 같이 컴포넌트에 Import합니다.

About/index.js

import './style.css';

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

단, CSS는 로 Import 됩니다.<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를 컴포넌트 범위로 Import하려면 어떻게 해야 합니까?React ES6의 CSS Import를 잘못 이해하고 있는 것 같습니다.

나는 이 튜토리얼을 따라하고 있었다.

---

편집

브렛의 대답은 옳다.하지만, 제 문제는 다른 곳에 있는 것으로 판명되었습니다.기본적으로 리액트를 하기 위해 필요한 설정을 단순화하는 create-react-app을 사용하여 앱을 만들었습니다.여기에는 WebPack, Babel 및 기타 시작하기 위한 것들이 포함되어 있습니다.사용하는 기본 WebPack Configuration에서는 에 대한 모듈옵션이 설정되어 있지 않습니다.css-loader디폴트로는false그 결과 로컬 스코핑이 활성화되지 않았습니다.

create-react-app에는 WebPack 설정을 커스터마이즈할 수 있는 간단한 방법이 없는 것 같습니다만, Web에는 수많은 회피책이 있는 것 같습니다.

CSS 모듈 또는 다른 많은 CSS-in-JS 패키지가 원하는 대로 동작하는 것 같습니다.기타 패키지에는 Emotion(현재 즐겨찾기), Styled Components(스타일 구성 요소) 또는 많은 패키지가 포함되어 있습니다.

CSS 모듈은 모든 클래스 이름과 애니메이션 이름이 기본적으로 로컬로 스코핑되는 CSS 파일입니다.모든 URL(url(...) 및 @imports는 모듈 요청 형식(./xxx 및 ../xxx는 모듈 폴더 내, xxx 및 xxx/yyy는 node_modules 내)을 의미합니다.

다음은 간단한 예입니다.

예를 들어 다음과 같은 React 컴포넌트가 있다고 합시다.

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는./styles/button.css대상:

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

CSS 모듈이 실행되면 생성되는 CSS는 다음과 같습니다.

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

어디서_3DjDE는 랜덤하게 생성된 해시입니다.CSS 클래스에 일의의 이름을 붙입니다.

대체 수단

보다 간단한 대안은 범용 셀렉터를 사용하지 않는 것입니다(예:p,code컴포넌트 및 요소에 대해 클래스 베이스 명명 규칙을 채택합니다.BEM과 같은 컨벤션이라도 발생하는 충돌을 방지하는 데 도움이 될 것입니다.

이것을 예에 적용하면, 다음과 같이 할 수 있습니다.

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

기본적으로 스타일을 지정해야 하는 모든 요소는 고유한 클래스 이름을 받습니다.

리액트 스코프 css가 도움이 될 거야덧붙여서, 저는 이 lib의 저자입니다. 만약 당신이 뭔가 고장난 것을 발견하거나 단순히 그것을 개선하고 싶다면, 당신은 언제든지 문제를 제기하거나 PR을 보낼 수 있습니다.

당신이 말한대로create-react-app서의 해결책은 수 style.css로로 합니다.style.module.css 나올

import styles from "./style.module.css"
<button className={styles.button}>blabla</button>

이 기사에 대한 자세한 내용은http://https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e 를 참조해 주세요.

SAS(.scss)를 사용하여 스코프 CSS를 모방할 수 있습니다.

(경합을 피하기 위해) 하나의 컴포넌트에서만 부트스트랩을 사용할 필요가 있다고 합니다.를 「」로 .<div className='use-bootstrap'> 다음과 .을 만들었습니다

.use-bootstrap {   
  // Paste bootstrap.min.css here
}

명명 을 사용합니다.[name].module.css매뉴얼 https://create-create-contrace-app.dev/contrace-a-contrace-stylesheet 를 참조하십시오.

JSX 파일

import React from 'react';
import styles from './index.module.scss';

const MyPage = () => {
    return (
        <div className={styles}>
            <h1>My Page</h1>
        </div>
    );
};

export default MyPage;

스타일 파일

    h1 {
        color: #f3f3f3;
        font-family: "Cambria";
        font-weight: normal;
        font-size: 2rem;
    }

간단한 솔루션(Css-modules 또는 css-in-js를 사용하지 않음)은 클래스 셀렉터에 다음과 같이 서픽스를 추가하는 것입니다.

className="btn__suffix"

컴포넌트의 이름이 다음과 같은 경우:FileUpload.tsx를 통해 __suffix가 __fu가 되도록 각 단어의 첫 글자를 가져왔습니다(여기:File ★★★★★★★★★★★★★★★★★」Upload를 참조해 주세요.

최종 결과는 다음과 같습니다.

import './style.css';

export default class About extends Component {
render() {
      Return (
         <div className="container__fu">
           ...
         </div>
              )
   }
}

CSS 부분에서 파일은 다음과 같습니다.

.container__fu {
   ...
}

언급URL : https://stackoverflow.com/questions/47090574/how-to-make-react-css-import-component-scoped