Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- MariaDB
- wsl
- 변수
- 설치
- 리액트
- 블록체인
- 이더리움
- 전역설치
- 시퀄라이즈
- 환경변수
- npm
- 노드
- Docker
- wget
- 벨로포터
- immer
- 우분투
- 자바스크립트
- 일반유저
- 쉘스크립트
- centos
- 머클루트
- 깃허브
- 라우터
- Sequelize
- 리눅스
- node.js 교과서 따라하기
- 솔리디티
- 머클트리
- 리액트를 다루는 기술
Archives
- Today
- Total
코드코코
[리액트] CSS module 본문
CSS module
-CSS 클래스가 중첩되는 것을 완벽히 방지
-CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때, CSS 파일의 확장자를 .module.css 로 한다.
-styles.icon 이런 식으로 객체안에 있는 값을 조회
>>만약 클래스 이름에 - 가 들어가 있다면 다음과 같이 사용: styles['my-class']
>>여러개가 있다면 다음과 같이 작성: ${styles.one} ${styles.two}
>>조건부 스타일링 : ${styles.one} ${condition ? styles.two : ''}
- Sass 에서도 사용가능 : 확장자를 .module.scss 로
'기록 > 정리' 카테고리의 다른 글
[자바스크립트] VS CODE에서 console.log 자동완성하기 (0) | 2021.10.29 |
---|---|
[리액트] styled-components (0) | 2021.10.26 |
[리액트] Sass(Syntactically Awesome Style Sheets) (0) | 2021.10.26 |
[리액트] import * as React from 'react'; (0) | 2021.10.25 |
[리액트] Immer (0) | 2021.10.25 |