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;

ReactのCSS

CSS Modules

CSS in JS ライブラリ

Radium

styled-components

Emotion