9일째 보도다.
어제는 "Ransa Advent Calendar 2018"였다.
랜더스에는 css-modules로 작성된 리액션 제품이 몇 개 있습니다.
최근 리액션 개발은 스타일드-components를 적용해 쓰기 좋으니 소개해 드리겠습니다.

이른바 스타일드-components

styled-copmonents는 JavaScript의 파일에서 css를 정의하는 프로그램 라이브러리로, 이른바 CSS in JS의 일종이다.
스타일드-components는 스타일드입니다.[태그 이름][css]를 사용하여 스타일에 맞는 구성 요소를 만들 수 있습니다.
생성된 구성 요소는 변수 이름을 탭 이름으로 사용할 수 있습니다.
App.jsx

import styled from "styled-components";

const Title = styled.h1`
　　　　font-size: 30px;
  color: red;
`;

const App = () => (
  <Title>タイトル</Title>
)

스타일드 얘기 좀 하자.h1에 모범적인 소양이 있는 문장이 익숙하지 않을 수도 있는데 이것은 Launsers에서 실습할 때 느낀 프로그래밍 학습에서 개인과 단체의 차이라고 불리는 문법이다.

조립품을 만들어 보다

스타일드-components를 사용하여 아래 그림과 같은 단추의 구성 요소를 만들어 보십시오.
이 버튼에는 세 가지 색상이 있습니다.default Primary Danger입니다.
두 가지 크기가 있는데 디스플레이와 다른 패턴이 있습니다.
태그 템플릿 상수
최종 코드는 위에 있습니다.

공통점을 이루다

default 단추를 누르고 모든 모드에서 공통된 스타일을 선택하십시오.
여기서 글꼴의 크기와 원도를 설정하거나, 가로대에 있는 커서를 바늘로 설정할 수 있습니다.
공통점을 이루다

const Button = styled.button`
  font-size: 1rem;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
`;

const App = () => (
  <div>
    <Button>Button</Button>
  </div>
)

여기.

색깔을 바꾸다

다음은 색깔을 바꾸어 보세요.
이번에는default,Primary,Danger 세 가지 버튼을 사용할 수 있습니다.
색깔을 바꾸다

const Button = styled.button`...`;

const PrimaryButton = styled(Button)`
  border: none;
  color: white;
  background: #007bff;
`;

const DangerButton = styled(Button)`
  border: none;
  color: white;
  background: #dc3545;
`;

const App = () => (
  <div>
    <Button>Button</Button>
    <PrimaryButton>Primary</PrimaryButton>
    <DangerButton>Danger</DangerButton>
  </div>
)

styled([コンポーネント名])에 기존 구성 요소에 스타일을 추가할 수 있습니다.
여기default의button에backgroud와 컬러를 추가하여 새로운 구성 요소PrimaryButtonDangerButton를 제작합니다.

크기 변경

default 크기 외에도 큰 사이즈의 단추를 사용할 수 있습니다.
구성 요소의 props에 large를 제공하여 사이즈를 변경합니다.
크기 변경

const Button = styled.button`
  font-size: 1rem;
  padding: ${props => (props.large ? "10px 15px" : "5px 10px")};
  border-radius: 5px;
  cursor: pointer;
`;

const PrimaryButton = styled(Button)`..`;
const DangerButton = styled(Button)`...`;

const App = () => (
  <div>
    <div>
      ...
    </div>
    <div>
      <Button large>Button</Button>
      <PrimaryButton large>Primary</PrimaryButton>
      <DangerButton large>Danger</DangerButton>
    </div>
  </div>
)

css는 템플릿 상수로 기술하기 때문에 ${}에 변수 등을 추가할 수 있습니다.
또한styled-components${}에서도 함수를 제공할 수 있으며, 첫 번째 파라미터는 구성 요소의props이다.
위의 코드는props가large를 부여받은 경우와 그렇지 않은 경우padding을 바꿉니다.

disabled에서 스타일 변경

disabled 버튼이 있으면 색상과 커서 모양이 변경됩니다.
크기를 바꾸는 것과 같이,props에disabled를 제공할 때 스타일을 바꿉니다.
disabled에서 스타일 변경

import styled, { css } from 'styled-components';

const Button = styled.button`
  ...

  ${props => props.disabled && disabledCss}
`;

const disabledCss = css`
  opacity: 0.5;
  cursor: default;
`;

const PrimaryButton = styled(Button)`..`;
const DangerButton = styled(Button)`...`;

const App = () => (
  <div>
    ...
    <div>
      <div>
        <Button disabled>Button</Button>
        ...
      </div>
      <div>
        <Button large disabled>Button</Button>
        ...
      </div>
    </div>
  </div>
)

css는 css를 변수화하고 템플릿 소양에 삽입하는 데 사용됩니다.
디스플레이의 스타일을 변수화하여 props의disabed가 존재할 때 삽입합니다.
이렇게 하면 완성된다.

css-modules와의 비교

css-modules로 같은 걸 만들면 아래가 될 것 같아요.
css-modules의 경우

import React from 'react';
import styles from './styles.css';

function createButton(type) {
  return ({children, large, disabled}) => {
    const classNameList = [styles.button, styles[type]]
    if (large) {
      classNameList.push(styles.large)
    }
    if (disabled) {
      classNameList.push(styles.disabled)
    }
    return (
      <button className={[styles.button]}>{children}</button>
    )
  }
}

const Button = createButton('default');
const PrimaryButton = createButton('primary');
const DangerButton = createButton('danger');

이에 비해 스타일드-components는 다음과 같은 장점이 있다.

styled-components에서만 완성.간단한 구성 요소라면react를 가져올 필요가 없습니다.

css-modules를 통해 스타일을 바꾸면 최종적으로className에 줄 문자열을 생성하는 방법이 발생합니다.따라서 이런 간단한 구성 요소도 복잡한 논리를 만들어 낼 수 있다.styled-component는 복잡하지 않습니다.

문서 하나가 완성되어 전망이 양호하다.

총결산

styled-components를 사용하여 단추의 구성 요소를 만들었습니다.
css-modules와 비교하면 간단한 코드로 만들어진 것을 알 수 있습니다.
이상은 ""9일째 보도입니다.
내일은 랜더스 엔지니어의 키보드 세계다.기대해주세요!