Today I Learned

毎日習ったことを整理して記録する.sty-componentsを学びました.

CSS-in-JS

アセンブリのモデリング例の1つ

JavaScriptファイルでスタイルを宣言します.css, .scssファイル

を作成する必要はありません

CS-In-JS代表ライブラリはスタイルコンポーネント、感情などを含む

styled-components

props値は、スタイル

に簡単に適用できます.

propsは条件造形

を簡略化することができる.

ex)

installation

npm install --save styled-components

code

import React from 'react'
import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css` 
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

const Button = styled.button``

result

テンプレート文字のタグ付け

の上のコードでは、"(backtick)を使用して文字列形式でスタイルを作成する構文

テンプレートにJavaScriptオブジェクトが含まれ、関数を渡すときに

を抽出できます.
Reference :

金民俊(VELOPERT)、『操作反応の技術』、吉友(2019)、p 241-252.

スタイル-部品の正式文書(https://styled-components.com/)

MDN Template literals ( https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals )