React에서 style 적용하기
CSS, CSS-in-Css(Sass), Css-in-JS(styled-components)
npm install styled-components@5 명령어로 설치
JavaScript
복사
App.js (최상위 컴포넌트)에서 createGlobalStyle() 선언하면 모든 문서에 적용됨
import { createGlobalStyle } from “styled-components”
const GlobalStyle = createGlobalStyle`
span {
color: red;
font-size: 12px;
}
`
JavaScript
복사
=> 함수표현식으로 표현됨
Reset css
npm i styled-reset 명령어로 설치가 가능
import reset from “styled-reset”
const GlobalStyle = createGlobalStyle`
${reset}
평소에 쓰던 reset코드…
`
JavaScript
복사
styled-components를 사용한 스타일 적용
const 변수명 = styled.태그명`
background-color : red;
`
예시)
const ContentDiv = styled.div`
margin: 40px;
`;
JavaScript
복사
const ContentH2 = styled.h2`
width: 200px; margin: 0 auto; text-align: center;
`;
JavaScript
복사
장점1: 클래스 네임을 고민할 필요가 없음, 알아서 클래스를 만들어줌
장점2: 파일을 한꺼번에 관리할 수 있음, 자바스크립트 문법을 사용할 수 있음! 조건부 스타일을 사용할 수도있음
props로 조건부 스타일 만들기
const ContentH2 = styled.h2`
color: ${(props) => (props.name === 'hello'? 'red' : 'black')};
width: 200px;
margin: 0 auto;
text-align: center;
`;
JavaScript
복사
const App = () => { return ( <ContentDiv> <ContentH2 name="hello">Q&A</ContentH2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus laborum qui veritatis quaerat eaque! Nemo, ullam. </p> </ContentDiv> ); };
JavaScript
복사
=> 제목만 빨간색으로
module.css
index.js에 index.css를 import 하게 되면 전역으로 CSS가 적용된다
App.js에 App.css를 import하게 되면 App 컴포넌트에 들어있는 모든 컴포넌트에 적용된다
같은 조건이라면 나중에 선언된 규칙이 우선순위를 가짐 -> module.css 사용하면 된다
CSS 파일 이름에 .css를 module.css로 바꿔주기=> class명에 고유값을 추가해주어서 겹치지 않도록 해준다.
예시 ) Question.jsx와 Question.css
.css를 module.css로 바꾸기
import styles from “./파일명.module.css"; 바꿔주기
JavaScript
복사
const Question = () => { return ( <div className={styles.box}> <h2 className={styles.text}>Q&A</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus laborum qui veritatis quaerat eaque! Nemo, ullam. </p> </div> ); }; export default Question;
JavaScript
복사
{styles.text} => styles에 text 클래스 적용하기
두개의 스타일을 합쳐서 하나의 스타일을 만들고 싶을 때
const ContentDiv = styled.div`
margin: 40px;
`;
JavaScript
복사
const ContentH2 = styled.h2`
width: 200px; margin: 0 auto; text-align: center;
`;
const One = css`
color:red;
`;
const Two = css`
border: 1px solid black;
`;
const Three = styled.div`
${One}
${Two}
`;
JavaScript
복사
=> Three를 적용받을 곳에 Three 태그로 감싸줌
클래스 명 겹치지 않도록 해줌
