[React.js] 단숨에 스타일링 익히기 :: styled-components

 

SCSS 같은거라 보면 돼요.

설치할께요.

npm install --save styled-components

 

상속도 되고 구조화도 가능해요.

종합 예제를 만들어봐요.

import styled, { css } from 'styled-components';

const BoxParent = styled.div`
    padding: 50px;
`;

const Box = styled(BoxParent)`
    background-color: ${(props) => props.bgColor};
    color: red;

    // &는 this와 같은 의미
    & > div {
        color: blue;
        ${(props) => props.bgColor === 'grey' && css`
            color: yellow;
        `}
    }
`;

function App() {
    return (
        <>
            <Box bgColor="yellow">
                Hello World
                <div>Hello World</div>
            </Box>
            <Box bgColor="grey">
                Hello World
                <div>Hello World</div>
            </Box>
        </>
    );
}

export default App;

 

Box는 div 컴포넌트인 BoxParent를 상속받아서 패딩이 50px인 div에요.

props 속성도 있어서 재사용이 가능하고, 자신 아래의 컴포넌트에 스타일을 별도로 적용할 수도 있어요.

 

더 궁금하면 아래 페이지를 방문하세요.

https://styled-components.com/

styled-components

 

 

영어, 중국어 공부중이신가요?

홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요!

한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어