REACT styled-components

컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식 입니다. 이 방식을 CSS-in-JS 라고 부릅니다

styled-components와 일반 className를 사용하는 CSS/Sass를 비교했을 때, 가장 큰 장점은 props값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다는 것입니다.

vscode-styled-components : VS Code에서 styled-components를 작성할 때 도움이 되는 플러그인

css는 styled-components패키지에서 제공하는 함수로, 스타일을 재사용하기 위해 사용됩니다. css함수는 스타일을 정의하는 데 사용되는 템플릿 리터럴을 반환합니다.

예제

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

const Box = styled.div`
    background-color: ${props => props.color || "blue"};
    padding: 1rem;
    display: flex;
    width: 1024px;
    margin: 0 auto;
    /* 최대 너비가 1024px 일 때, 768px로 변경 */
    @media (max-width:1024px){
        width: 768px;
    }
    @media (max-width:768px){
        width: 90%;
    }
`;

const Button = styled.button`
    background: white;
    color:black;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    //보더 라인까지를 크기로 잡는 것
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
    &:hover{
        background:rgba(255,255,255,0.5);
    }
    ${props => 
    props.inverted && 
        css`
            background: none;
            border: 2px solid white;
            color: white;
            &:hover{
                background: white;
                color: black;
            }
        `
    };
    & + button {
        margin-left:1rem;
    }

`;

const StyledComponent = () =>{

    return(
        <Box color="orangered">
            <Button>안녕하세요.</Button>
            {/* inverted가 있으면 */}
            <Button inverted={true}>테두리만.</Button>
            
        </Box>
    );
};

export default StyledComponent;