Section 13 Card 컴포넌트 실습 스타일링 질문
273
작성한 질문수 1
안녕하세요, 덕분에 재밌게 리액트 공부하고있는 직장인입니다.
섹션13 카드 컴포넌트 실습에서 소플님 코드에서는 Inline styling 으로 backgroundColor: backgroundColor || 'white' 라고 적어주셨는데 제가 css.module 스타일파일을 만들어서 style sheet에서 import 해서 쓰고싶으면 prop으로 받은 background 를 style sheet 에 어떻게 넘겨줄수있는지 궁금합니다.
답변 2
0
안녕하세요, 소플입니다.
제가 모르는 다른 방법이 있을지는 모르겠지만,
제가 아는 선에서는 리액트에서 CSS파일로 직접 변수 값을 전달하는 것은 불가능합니다.
그래서 사전에 사용할 색상 값들을 CSS에 지정해놓고,
말씀하신 classnames나 clsx 같은 라이브러리를 사용해서 props의 값에 따라 클래스 이름을 넣어주는 형태로 사용하셔야 합니다.
https://github.com/JedWatson/classnames
https://github.com/lukeed/clsx
추가로 스타일링 방법은 워낙 많고 다양하기 때문에,
여러가지 방법을 적용해보시면서 나에게 잘 맞는 스타일링 방법을 찾으시는 것이 좋습니다 😀
(Sass, emotion, styled-components, TailwindCSS, StyleX 등)
감사합니다.
강의가 삭제되었다고 합니다
0
106
1
이거 왜 존재하지 않는다고 뜨는건가요
0
133
1
존재하지 않는 수업이라고 떠요
0
182
1
안드로이드 에뮬레이터 오류
0
100
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
125
1
prevIsConfiromed 질문
1
141
2
chapter14 잘이해가 되지않습니다..
1
135
2
2025년 3월 리액트버전
1
201
2
npm 설치 오류
1
174
1
chapter_07 콘솔로그 질문드려요~!
1
127
2
안녕하세요 미니블로그 실습 질문드립니다.
1
178
3
에러가 떠요
1
218
3
Chapter6 질문 드립니다
1
208
2
실습 코드 있을까요?
1
205
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
233
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
307
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
139
1
버튼이 안 뜹니다
0
303
2
npx create-react-app my-app
1
470
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
375
3
Chapter_05 터미널, 리액트 에러
0
193
2
npx create-react-app my-app 명령어 반응없음
1
432
3
import 코드 에러
1
214
1
백틱
1
121
1