styled-components

polished의 스타일 관련 유틸 함수 사용하기

Sass를 사용 할 때에는 lighten() OR darken() 과 같은 유팅 함수를 사용하여 색상에 변화를 줄 수 있었습니다.
CSS in JS 에서도 비슷한 유팅 함수를 사용하고 싶다면 polished 라는 라이브러리를 사용하면 됩니다.

polished 사용

$ yarn add polished 

ThemeProvider 사용

styled-components 로 만드는 모든 컴포넌트에서 조회하여 사용 할 수 있는 전역적인 값을 설정해보겠습니다.

const AppBlock = styled.div`

    width : 512px;
    margin : 0 auto;
    margin-top : 4rem;
    border : 1px solid black;
    padding : 1rem;
`;

function App(){
    return (
        <ThemeProvider theme={{
            palette : {
                blue : "#228be6",
            }
        }}

        >

        <AppBlock>
            <Button>Button</Button>
        </AppBlock>
       </ThemeProvider>
    );
}

이런식으로 theme를 설정하면 ThemeProvider 내부에 렌더링된 styled-components로 만든 컴포넌트에서 palette 를 조회하여
사용 할 수 있습니다.

ThemeProvider 사용법

ThemeProvider로 설정한 값은 styled-components 에서 props.theme 로 조회할 수 있습니다.