【StyledComponent】StyledSystemでインラインスタイルぽく書く

Styled Componentを使っていて面倒なのはconst Wrapper = styled.divといったスタイルの定義が下の方にまとまってファイルが長くなってしまうこと

React Elementsをreturnする部分とスタイルの行き来でスクロールが面倒

できるならインラインスタイルだとよいのだが、Reactはインラインスタイルは推奨していない

こんなとき、これを解消するStyled Systemというライブラリを知ったので調べた

GitHub - styled-system/styled-system: ⬢ Style props for rapid UI development

特徴

• 独自のテーマのstyle propsを追加できる
• レスポンシブなフォントサイズ、マージン、パディング、幅などを設定できる
• 制約ベースのデザインシステムの原則の影響を受ける
• マージンとパディングの間隔スケール
• 任意のカラーパレットで動作する
• Styled Componentやemotionを含む、ほとんどのcss-in-jsライブラリで動作する

こんな感じで使う

import styled from 'styled-components'
import { color } from 'styled-system'

const Box = styled.div`
  ${color}
`

export default Box

これだけで、colorとbgの２つのpropsが使えるようになる

<Box color="#fff" bg="tomato">
  Tomato
</Box>

このとき、theme.jsを定義しThemeProviderに渡しておけば、独自のテーマを使うことができるようになる

// theme.js
export default {
  colors: {
    black: '#000e1a',
    white: '#fff',
    blue: '#007ce0',
    tomato: '#004175',
  },
}

import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'

const App = props => (
  <ThemeProvider theme={theme}>{/* application elements */}</ThemeProvider>
)

export default App

また、マージンやパディングなどはtailwindのように略称で定義できる

m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin-left and margin-right
my margin-top and margin-bottom

このようにして、Styled-Componentでもインラインスタイルのように書けるのでスクロールの行き来をしなくて済む

もう少し試してみてよさそうならプロダクトで利用していみたい