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는 다음과 같습니다.
- 이 구성요소 내에서 렌더링된 항목에만 스타일이 적용되는 방식으로 구성요소 범위 지정.
- 구성 요소가 마운트 해제되면 이 구성 요소의 스타일이 사라집니다.
단, 브라우저에서 검사하는 경우 스타일은 다음에서 지정됩니다.<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
'programing' 카테고리의 다른 글
create-react-app을 사용하여 작성된 리액트 프로젝트의 웹 팩 구성을 업데이트하려면 어떻게 해야 합니까? (0) | 2023.03.09 |
---|---|
변수 감시 및 변경 (0) | 2023.03.09 |
클릭 시 마우스 포인터 변경 (0) | 2023.03.09 |
처리되지 않은 jQuery AJAX 오류 방지 (0) | 2023.03.09 |
Oracle의 부울 필드 (0) | 2023.03.04 |