react styled component

 

https://styled-components.com/

styled-components

외부에 css,scss를 만들고 id,class로 참조하지 않고, 콤포넌트 내부에서 콤포넌트를 이름을 사용하는 것처럼 지정하는 것이다. 말이 복잡하다. 내부에 있기 때문에 전역적으로 중첩(꼬이는ㅋㅋ)되지 않게 사용할 수 있다. 이게 전부인가?

일단 설치한다.

npm install styled-components

콤포넌트내에서 사용할 style을 대충 만들어 본다.

import styled from "styled-components";

const Example = (props) => {
  const bgColor = "yellow";

  const MyButton = styled.button`
    background: ${bgColor};
    color: black;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
  `;
  const MyBox = styled.div`
    background: grey;
    padding: 20px;
    border-radius: 5px;
    margin: 10px;
  `;

  const ExtendButton = styled(MyButton)`
    background: red;
  `;

  return (
    <div>
      <MyButton>styled component</MyButton>
      <MyBox>styled component</MyBox>
      <ExtendButton>styled component</ExtendButton>
    </div>
  );
}

 

typescript를 사용해 보려고 하니 type먼저 설치했다

npm i -D @types/styled-components

npm i styled-components
가볍게 다음과 같은 오류가 남..
npm ERR! Cannot read properties of null (reading 'edgesOut')

npm i styled-components@5.3.11

현재 최신 6.0.0-rc3이다. 그냥 5.3.11로 설치하니 된다.

props를 여러개 받으려면 interface가 필요하다고 다른 분들이 적어 놨던데, 현재 시점에

그냥 object type을 넣어도 되는데? 어디가 고장인가?

import React, {JSX} from 'react';
import styled from "styled-components";

function Example(): JSX.Element {
  const bgColor: string = "yellow";

  const MyButton = styled.button<{ bgColor: string }>`
    background: ${props => props.bgColor};
    color: black;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
  `;
  const MyBox = styled.div`
    background: grey;
    padding: 20px;
    border-radius: 5px;
    margin: 10px;
  `;

  interface MyButtonInterface {
    bgColor:string,
    color:string
  }

  const ExtendButton = styled(MyButton)<MyButtonInterface>`
    background: ${props => props.bgColor};
    color: ${props => props.color};
  `;

  const ExtendButton2 = styled(MyButton)<{ bgColor:string, color:string }>`
      background: ${props => props.bgColor};
      color: ${props => props.color};
    `;

  return (
    <div>
      <MyButton bgColor={bgColor}>styled component</MyButton>
      <MyBox>styled component</MyBox>
      <ExtendButton bgColor={'red'} color={'white'}>styled component</ExtendButton>
      <ExtendButton2 bgColor={'white'} color={'red'}>styled component</ExtendButton2>
    </div>
  );
}

export default Example;

뭐지?