Next focusなどcssの擬似クラス

Next.jsでfocusなどの擬似クラスを書くとき

ReactではCSSを書くときにinline stylesで書けます。
しかし、Next.jsで擬似クラスを書こうとしたら、うまく反応してくれなかったので、
Styled JSXを使った時のメモをを残します。

問題点

inline stylesでCSSを記載していたのですが、何故か:focusなどの擬似クラスが反応してくれませんでした。

import React from 'react'

// ex
const Password = () => {
  return (
    <input type='password' style={style} />
  );
}

// :focusの部分が擬似クラスとして読み込まれていない？
const style = {
  border: '1px solid #1b2538',
  ':focus': {
    border: '1px solid #1976d2',
  }
}

改善

Nextでは「Styled JSX」モジュールがデフォルトで含まれているので、こちらの書き方に直したら擬似クラスも反応してくれました。

// ex
import React from 'react'

const Password = () => {
  return (
    <div>
      <input type='password'/>
      // 変更箇所
      <style jsx>{`
      input {
        border: 1px solid #1b2538;
      }
      input:focus {
        border: 1px solid #1976d2;
      }
      `}</style>
    </div>
  );
}

こちらのモジュールのいいところは、CSSをフルサポートしているので、box-shadowなど要素をそのまま書けること。
わざわざキャメルケースに直したりする必要をないので、使いやすくて楽です。

まとめ

Next.jsでCSSを書くときは「Styled JSX」モジュールがデフォルトで組み込まれているので、このモジュールを積極的に使っていく。

補足

ReactとかJSが得意な者の記事ではありません。
問題点の原因がわかる方がいたら教えていただけると助かります。