Styled Components?

1.特徴

function transform(staticData, ...dynamicData) {
 	console.log(staticData); // ["Hi, ", " and I am ", "."]
   console.log(dynamicData);// ["Mygumi", 20]
}
transform`Hi, ${userName} and I am ${age}.`;

transform를 일반적인 함수 호출 방식인 transform() 이 아닌 transform` ` 형태이다.
첫 번째 데이터에는 정적 데이터가 , 나머지 파라미터에는 동적데이터가 저장되어있다



 ## 2. 설치, 사용
 ```javascript
npm install --save styled-components

(1)基本文法

import styled from "styled-components"; // styled-components 패키지에서 styled 함수를 임포트

styled.button" 
 //<button> HTMOL 엘리먼트에 스타일 정의
"

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
  // <Button> React 컴포넌트에 스타일 정의
`;

(2) props

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "grey"}; //props 칼라가 없으면 grey
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  );
}

(3)extends:継承&拡張

const Button = styled.button`
`;
const LongButton = styled(Button)`
	//button을 상속받고, 속성을 추가할 수 있음
`;

(4)attrs属性の指定

const PwInput = styled.input.attrs(props => ({
	type : "password"
}))

const TextInput = styled.input.attrs(props => ({
	type : "text"
}))

（5）禁忌事項

import React from 'react';
import styled from 'styled-components';

const AnyComponent = () => {
    // 절대 여기서 선언하면 안됩니다!
    const Button = styled.button`
        {button styles...};
    `;

    return (
        <Button>Bad!!!!</Button>
    );
}

return AnyComponent;

ソース