Learn : CSS in JS Library Emotion

2019/10/24(Thu) - 17:16

emotionを3行で説明すると

  • JSでstyleを記載するCSS-in-JSライブラリのひとつ
  • styled-componentsなどに比べて後発のため、いいとこ取りになっている
  • JSXの中でインライン記法のようにCSSを書けるCSS propが特徴

利用スタイル(CSS prop)

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

# オブジェクト記法の場合
const style = css({
	backgroundColor: #fff;
	color: #fff;
	'&:hover': {
		backgroundColor: #000;
		color: #000;
	}
})

# タグつきテンプレートリテラル記法の場合
const style = css`{
	background-color: #fff;
	color: #fff;
	'&:hover': {
		background-color: #000;
		color: #000;
	}
}`;

const Component: React.FC = ({ children }) => {
	return (
		// css propにstyle適用
		<div css={style}>{children}</div>
	)
}

export default Component;