TIL 24 | Styled components

kim seung chan·2021년 9월 19일
1

styled component

styled component란 ?

본질적으로, Styled-component 는 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으면 javascript 코드 내에서 일반 css로 구성 요소의 스타일을 지정할 수 있다.

설치

npm install --save styled-components

기본문법

import styled from 'styled-componets'


render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

사용법

const {위에서 지정해준 component명} = styled.{태그명} ``;

Adapting based on props

render(
  <div>
    <Button>Normal</Button>
    <Button width="100">Primary</Button>
  </div>
);

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.width < 200 ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

global style

Sass에서 common.scss와 reset.scss 의 역할도 Styled Component에 존재한다 바로 Global Style이다.

  color: ${(props) => props.theme.colors.grayColor};

출처

https://analogcoding.tistory.com/181

0개의 댓글