styled-components

확장 프로그램 검색 -> styled-components 깔고 초기세팅 해준다.

 

터미널에

yarn add styled-components

npm add styled-componenets

입력해주고 package.json을 보면 깔려있는 내용을 알 수 있음.

 

 

CSS - in JS: 자바스크립트로 CSS를 작성하는 방식

props를 통해서 부모컴포넌트 => 자식 컴포넌트로 조건부 스타일링이 가능하다.

import React from 'react';
import styled from 'styled-components';

const StBox = styled.div`
    color: red;
`;

const StP = styled.p`
    color: blue;
    border: 1px solid
        ${(props) => {
            return props.borderColor;
        }};

    background-color: ${(props) => {
        return props.backgroundColor;
    }};
`;

export default function App() {
    return (
        <StBox>
            <StP borderColor="red" backgroundColor="pink">
                박스
            </StP>
            <StP borderColor="blue">박스</StP>
            <StP borderColor="green">박스</StP>
        </StBox>
    );
}

 

import React from 'react';
import styled from 'styled-components';

const StContainer = styled.div`
    display: flex;
`;

const StBox = styled.div`
    color: red;
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor};
    margin: 20px;
`;

const boxList = ['red', 'blue', 'green', 'b'];

const getBoxName = (color) => {
    switch (color) {
        case 'red':
            return '빨간 박스';
        case 'blue':
            return '블루 박스';
        case 'green':
            return '그린 박스';
        default:
            return '검정 박스';
    }
};

export default function App() {
    return (
        <StContainer>
            {boxList.map((box) => {
                return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
            })}
        </StContainer>
    );
}

 

GlobalStyles, Sass소개, cssReset 

GlobalStyles => 전역 스타일링 , 프로젝트 전체를 아우르는 스타일

 

createGlobalStyle로 공통적인 부분을 하나 만들어준다. 

똑같이 import 해줌