styled components

💅styled components

안녕하세요 triplexlab 입니다.
오늘은 styled components에 대해서 이야기를 해보도록 하겠습니다.

👉props로 style을 변경

class를 추가해서 style를 변경하고 싶은 상황이라고 가정하면
props로 전달해서 삼항연산자로 변경하면 될것 같다고 생각을 합니다.

import styled from "styled-components";

const Sample = () => {
    return (
        <ItemStyle completed={list.completed}/>
    )
};

const ItemStyle = styled.div`
  padding: 16px;
  margin: 8px;
  background-color: ${(props) => props.completed ? "slateblue" : "aliceblue"};
`;

export default Sample;

이렇게 하면 styled에서 props로 전달 받아서 completed가 true일때 "slateblue"를 false 이면"aliceblue"를 할수 있습니다.
이렇게하면 단점이 하나의 스타일 속성만 변경이 된다는 것입니다. 여기서는(background-color)만 변경이 되는것이죠

👉class를 추가해서 style을 변경

위에서 말한 단점을 보안하기 위해서 class를 동적으로 추가해서 style를 변경해 봅시다.
다음과 같이 styled에서 &기호를 통해서 is_open이라는 클래스가 추가되면 background-color와, color 속성 모두를 함꺼번에 변경을할수 있습니다.

import styled from "styled-components";

const Sample = () => {
    return (
        <ItemStyle className={list.completed ? "is_open" : null}/>
    )
};

const ItemStyle = styled.div`
  padding: 16px;
  margin: 8px;
  &.is_open {
    background-color:slateblue;
    color: #fff;
  }
`;

export default Sample;

👉 Styles Extending

이번에는 스타일을 Button 컴포넌트 기반으로 새로운 재구성 요소를 만들어 확장을 할수 있습니다.

const Sample = () => {
  render(
    <div>
      <Button>Normal Button</Button>
      <TomatoButton>Tomato Button</TomatoButton>
    </div>
  );
}

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 다음과 같이 Button을 기반으로 재정의 스타일이 있는 새 구성 요소를 추가할수 있다.
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

export default Sample;