React - styled Components styled

기존 웹사이트를 개발할 때는 HTML, CSS, JavaScript는 각자 별도의 파일에 두는 것이 원칙이었는데,

React나 Vue, Angular과 같은 라이브러리가 인기를 끌면서 여러 블록으로 분리하여 개발하는 방법이 주류가 되고있다.

웹페이지를  HTML, CSS, JavaScript로 분리하는게 아니라, 여러 개로 분리하고, 각 컴포넌트에  HTML, CSS, JavaScript를

적용하는것이 널리 사용됩니다. CSS-in-JS - (Styled Components)라이브러리를 사용하면 가능합니다.

$npm i styled-components

위의 코드로 간단히 설치할 수 있다. 

설치 후에는 package.json에 styled-components가 추가된다.

 

1. props 인자와  ||  을 통한 스타일링

 

const StyledButton = styled.button`
padding : 6px 12px;
border-radius: 8px;
font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
color : ${(props) => props.color || "gray"};
backgroundcolor : ${(props) => props.background || "tomato"}

`

function ButtonMake ({children, color, backgroundcolor}) {
    return <StyledButton color={color} backgroundcolor={backgroundcolor}>{children}</StyledButton>
}

props가 넘어오지 않은 경우, color는 gray, backgroundcolor는 tomato가 될것이다.

반대로 인자로 color와 backgroundcolor를 줄 경우 인자에 따라 색이 바뀐다.

import Button from "./Button";
<Button color="yellow" background="green">
  Green Button
</Button>;

인자를 줬기 때문에 각각 받은 색깔로 변한다.

 

2. prop에 따라 바꾸고 싶은 css속성이 여러개 일때 && 을 이용해서 스타일링 하기

const StyledButton = styled.button`
padding : 6px 12px;
border-radius: 8px;
font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  
  ${(props) =>
    props.mango && css`
    color: black;
    backgroundcolor: tomato;
    border-color: gray;
    `}

`

function ButtonMake ({children, ...props }) {
    return <StyledButton {...props}>{children}</StyledButton>
}

import Button from "./Button";
<Button mango>Mango Button</Button>;

props를 적용해서 여러가지 css를 적용한다.