Styled Components v4について

Styled Components v4について:

emotionがアツいとのことで、触ってみたい感はすごくあるのですが

ここではStyled Components v4が結構便利なので紹介させていただきたいと思います。

すごく早くて軽くなった

• 16.1kBから15kB未満に
• マウント時に約25％の高速化
• 再レンダリング時に約7.5％の高速化

createGlobalStyle

injectGlobalに代わってcreateGlobalStyleというAPIができました。

通常、styled componentsは自動的にローカルスコープになるため、他のコンポーネントから分離されます。

そこがいいところなのですが、bodyの値とかを一括で変えたいときに困ります。

bodyとかのスタイリングをしたいときにとても便利です。

もともとinjectGlobalというものがありましたが、動的なアップデートやホットリロードが出来なかったり、コンポーネントとして利用できなかったりでした。

import React from 'react'; 
import styled , { createGlobalStyle } from 'styled-components'; 
 
const GlobalStyle = createGlobalStyle` 
  body { 
    color: ${props => (props.whiteColor ? 'white' : 'black')}; 
    background: #333; 
  } 
` 
export default () => <React.Fragment> 
  <GlobalStyle whiteColor/> 
  Hello React 
</React.Fragment> 

"as" prop

styleがあてられたコンポーネントを別のタグで利用したい場合に使います。
.withComponentの代わりとなる機能です。

import React from 'react'; 
import styled from 'styled-components'; 
 
const GrayArea = styled.div` 
  background: #333; 
  color:white; 
` 
export default () => <React.Fragment> 
  <GrayArea as='button' onClick={() => alert('It works!')}> 
    Hello React 
  </GrayArea> 
</React.Fragment> 

GrayAreaはdivとして作られているが、as='button'を使うことでbuttonとして利用できます。

.extendの廃止

コンポーネントを拡張する場合には、Comp.extendに代わりstyled(Comp)と記述するように統一されました。

import React from 'react'; 
import styled from 'styled-components'; 
 
const Button = styled.button` 
  background: #333; 
  color: white; 
` 
 
const RedButton = styled(Button)` 
  background: red; 
` 
 
export default () => <React.Fragment> 
  <RedButton  onClick={() => alert('It works!')}> 
    Hello React 
  </RedButton> 
</React.Fragment> 

Strict Modeへの完全対応

Strict Modeに準拠する形になっています。

refのネイティブサポート

innerRefが廃止されたことによる対応です。

import React from 'react'; 
import styled from 'styled-components'; 
 
const Input = styled.input` 
  padding: 0.5em; 
  background: #333; 
  color: white; 
` 
 
export default class Form extends React.Component { 
  constructor(props) { 
    super(props); 
    this.inputRef = React.createRef(); 
  } 
 
  render() { 
    return ( 
      <Input 
        ref={this.inputRef} 
        placeholder="Hover to focus!" 
        onMouseEnter={() => { 
          this.inputRef.current.focus() 
        }} 
      /> 
    ); 
  } 
} 
 

css prop

いちいちコンポーネントを作るのが面倒な場合に、以下のように書けるようになりました。
babel pluginが必要で、実際には下のように変換されます。

<div 
  css={` 
    background: papayawhip; 
    color: ${props => props.theme.colors.text}; 
  `} 
/> 
<Button 
  css="padding: 0.5em 1em;" 
/> 

const StyledDiv = styled.div` 
  background: papayawhip; 
  color: ${props => props.theme.colors.text}; 
` 
 
const StyledButton = styled(Button)` 
  padding: 0.5em 1em; 
` 
 
<StyledDiv /> 
<StyledButton /> 

Theme Consumer

Context APIのConsumerコンポーネント。

ThemeProviderにて注入された状態を利用したConsumerが作成できるようになりました。

import React from 'react'; 
import styled, { ThemeProvider , ThemeConsumer} from 'styled-components'; 
 
const Child = () => <div> 
  <ThemeConsumer> 
    {theme => <div>The theme color is {theme.color}.</div>} 
  </ThemeConsumer> 
</div> 
 
export default () => <ThemeProvider theme={{ color: 'black' }}> 
  <Child/> 
</ThemeProvider> 

移行について

以前のバージョンを利用している場合、codemodsを利用して変換を行うことができます。

グローバルインストールして

npm install -g styled-components-codemods 

コマンドを叩く

styled-components-codemods v4 src/**/*.js 

Comp.extendとinjectGlobalが状況に応じて置換されます。