styled-components

Reactのstyled-componentsでaddClassをする方法

Reactのスタイリングにstyled-componentsを使っている人は多いと思います。

jQueryを利用していたことのある人は、クリックイベントでaddClassし特定のCSSを適用させたいようなことがあるかもしれませんが、styled-componentsで同じようなことをしようと思うと少し異なった書き方が必要だったのでまとめてみました。

実際にはclassを付加する訳ではないので、addClassを行うと書きましたが正確にはaddClass的な実装を行うです。

addclass

コードは以下の通りです。

import React, { Component } from 'react';
import styled from 'styled-components';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { class: false }
    this.toggleClass = this.toggleClass.bind(this);
  }

  toggleClass() {
    this.setState({ class: !this.state.class });
  }

  render() {
    return (
      
    );
  }
}

const Button = styled.button`
  color: white;
  font-size: 20px;
  width: 200px;
  height: 100px;
  line-height: 100px;
  background-color: ${props => props.class ?
    'red;' : 'blue;'}
`;

export default App;

実装方法について解説していきます。

ポイントは、実際のクラスを持たせるのではなく、コンポーネントのstateにクラスの代わりとなる値を持たせることです。

今回は、classというbooleanを持たせてこれがtrueのときはクラスを持ち、falseのときはクラスを持たないというように考えていきます。

 

onClicktoggleClassメソッドを呼び出し、ここでstateの真偽を反転させることでtoggleClassのような働きをさせます。

あとは、propsthis.state.classを渡し、styled-componentsを使ってCSSを割り当てるところで三項演算子を用いてclassがある場合とない場合でCSSを分けます。

このようにして、addClass(toggleClass)のような働きをReactで実装することができました。

 

styled-componentsを用いる場合、CSS内でもJavaScriptを使用できるので表現の幅が広がって便利ですね。