styled-jsxを使ってスタイルを定義する

styled-jsxとは、ReactやNext.jsプロジェクトでコンポーネントごとのスタイル定義を可能にするライブラリです。

styled-jsxをインストールする

npm install styled-jsx

styled-jsxを使ってスタイルを定義する

HelloWorld.jsx

function HelloWorld() {
  return (
    <div>
      <p>Hello World</p>
      
      {/* ここにスタイルを記述します */}
      <style jsx>{`
        p {
          color: blue;
          font-size: 20px;
        }
      `}</style>
    </div>
  );
}

export default HelloWorld;

以上です。