ReactのCSS

CSS Modules

• CSS のローカルスコープを JavaScript を用いて自然な形で利用できるようにした ライブラリ

/* style.css */ 
.common {
  font-size: 10px; 
} 

.normal {
  composes: common;
  color: green; 
}

import styles from "./style.css";

const MyAwesomeComponent = () => (
  <div className={styles.normal}>Awesome!</div> 
);

• このアプリを起動するとこう見える

<div class="style-normal__227xg">Awesome!</div>

• 実際のクラス名は <ファイル名>-<クラス名>__<ハッシュ> というフォーマットで自動生成され、末 尾に付与されるランダムなハッシュ値によって一意であることが保証される。
• CSS Modulesの詳しい内容はこちら
  https://postd.cc/css-modules/

CSS in JS ライブラリ

• JSX ファイルの中にスタイルを直 接書き込むタイプ

Radium

• メディアクエリや:hover、:focus、:active といったセレクタが使える

import React, { FC } from 'react'; 
import Radium from 'radium';

const styles = {
  base: { color: '#fff', 
    ':hover': {
      background: '#0074d9', 
      opacity: 0.4, 
    }, 
  }, 
  primary: { 
    background: '#0074D9', 
  }, 
  warning: { 
    background: '#FF4136',
  },
};

const Button: FC<{ kind: 'primary' | 'warning' }> = ({ kind, children }) => (
  <button style={[styles.base, styles[kind]]}> 
    {children} 
  </button> 
);

expot default Radium(Button);

styled-components

• styled.div～ で div タグをカスタマイズしたコンポーネントが作れる
• スタイルが適用されたコンポーネントを作成できる

import React, { FC } from 'react'; 
import styled 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; `;

const TwoButtons: FC = () => ( 
  <Container> 
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button> 
  </Container> );

export default TwoButtons;

Emotion

• インラインで記載可能
• フ ァイル サイズ が 小 さ く て 実 行 速 度 が 速 い

/** @jsx jsx */ 
import React, { FC } from 'react'; 
import { css, jsx } from '@emotion/core';

const color = 'darkgreen';

const ColoredText: FC = () => (

  <div 
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color}; 
      } 
    `}
  >
    This has a hotpink background. 
  </div>
);

export default ColoredText;