2020/07/13

【JS】Reactのstyleの使い方、書き方いろいろ

こんにちは！雨の日はReact。Mizutani(@sirycity)です。

今日はreact(というかJSX)にCSSを適用する時に使うstyleについてです。styleは無駄にいろんな書き方があるので順番に色々見ていきましょうね

概要

一番簡単な書き方はこう。

<div style={{color: 'red'}}>
  りんご
</div>

style={{ CSSのプロパティ: 'CSSの値' }} みたいな感じ。簡単だね。2つあるブレース{{}}はこんな感じに理解するといいと思う↓

って感じ。

styleに書くのは基本的にはcssと一緒。だけどいくつか注意点があります。

まずひとつ目。CSSの値はクォートで囲もう。囲まないとCSSの変数扱いになるからね。これは駄目。

<div style={{color: red}}>
  駄目なりんご
</div>

こんな感じに変数として使うならokだよ。

const apple = () => {
  const red = '#ed4134'

  return <div style={{color: red}}>
    りんご
  </div>
}

例外的に値が数字のやつは数字でもok。opacityとか。

<div style={{opacity: 0.6}}>
  透明なりんご
</div>
<div style={{opacity: '0.6'}}>
  透明なりんご
</div>

ケバブケースのプロパティはキャメルケースに直す、もしくはクォートで囲もう。background-colorとか。

<div style={{backgroundColor: 'red'}}>
  りんご
</div>
<div style={{'background-color': 'red'}}>
  りんご
</div>

別に普通のプロパティもクォートで囲んでok。特に意味ないけど。

<div style={{'color': 'red'}}>
  りんご
</div>

importantとかCSS関数の類はそのまま文字列として書いてok。

<div style={{color: 'red !important'}}>
  大切なりんご
</div>

何も設定しない時はunsetとかでもいいけど...

<div style={{color: 'unset'}}>
  りんごじゃない
</div>

style自体にnullとかundefinedを書いてもok。falseは駄目。~~falseでも特に問題なく動くけど~~

<div style={null}>
  りんごじゃない
</div>
<div style={undefined}>
  りんごじゃない
</div>

style={}の中に丸々変数入れてもok。こんな感じ。

const apple = () => {
  const red = {color: '#ed4134'}

  return <div style={red}>
    りんご
  </div>
}

ここからは分岐系。

三項演算子使えば分岐できます。こんな感じ。

const apple = () => {
  const isApple = true // or false

  return <div style={{color: isApple ? 'red' : 'green'}}>
    りんご？
  </div>
}

上のやつはcolor:redとcolor:greenの分岐だったけど、全然違うCSSプロパティで分岐もできる。

<div style={isApple ? {color: 'red'} : {display: 'none'}}>
  りんご？
</div>

分岐はnullと組み合わせることもできる。こんな風に。

<div style={isApple ? {color: 'red'} : null}>
  りんご？
</div>

でもstyleにはfalseは入らないのでこれは無理。classNameだとこういう書き方もできるんだけど...

<div style={isApple ?? {color: 'red'}}>
  無理んご
</div>

値で足し算とかもできる。

<div style={{color: 'r' + 'e' + 'd'}}>
  りんご
</div>
<div style={{width: 20 + 'px'}}>
  りんご
</div>

足し算と分岐組み合わせたりも。

<div style={{width: 20 + (foo ? 'px' : 'em')}}>
  りんご
</div>

こういう書き方は...

const apple = () => {
  const red = {color: '#ed4134'}

  return <div style={red}>
    りんご
  </div>
}

スプレッド構文を使うとこう書けます。

const apple = () => {
  const red = {color: '#ed4134'}

  return <div {... {style: red}}>
    りんご
  </div>
}

変数名をstyleにすればさらに短く書ける！

const apple = () => {
  const style = {color: '#ed4134'}

  return <div {... {style}}>
    りんご
  </div>
}

スプレッドは他属性も巻き込めるので、styleと並行してclassNameを使う時とかは相当すっきり書けます。

const apple = () => {
  const style = {color: '#ed4134'}
  const className = 'foo bar'

  return <div {... {style, className}}>
    りんご
  </div>
}

styleひとつ取っても相当色々な書き方ができます。この自由度もreactの魅力ね。でもチームで開発する時にスプレッド使いまくると周りの視線がやばいぞ。以上。