💅styled-component

설치하기

npm i styled-components

import styled from "styled-components";

사용방법

	const 변수명 = styled.html요소`display:flex;`;

	render(
    	<변수명 />
      //컴포넌트처럼 쓰면 된다!
    )

❗ 클래스명은 랜덤으로 만들어진다.

💅Adapting & Extending

props를 이용해서 스타일을 살짝 바꾸기

1. 컴포넌트에 props bgColor를 설정합니다.

const App = () => (
  <Wrapper>
    <Box bgColor="red" />
    <Box bgColor="green" />
  </Wrapper>
);

1. 스타일드 컴포넌트에 props를 가져와서 적용시킵니다. ${(props) => props.bgColor};처럼 사용하면 됩니다.

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.bgColor};
`;

<결과>

style 상속하기(확장)

sass의 상속과 같은 의미입니다^^

• styled(Box) - Box 컴포넌트의 스타일을 가져옵니다.

const Circle = styled(Box)`
  border-radius: 50%;
`;

<결과>