︙

CSS-in-JS

Examples

既存の CSS-in-JS ソリューションを利用することが可能です。最もシンプルなものは inline styles です:

function HiThere() {
  return <p style={{ color: "red" }}>hi there</p>;
}

export default HiThere;

私たちは styled-jsx をバンドルして、孤立したスコープの CSS をサポートします。目指しているのは、Web Components のような "shadow CSS" をサポートすることで、残念ながら servers 側での rendering をサポートせず、JavaScript のみで動くことをサポートしていません。

上記の例を参照して、他の人気のある CSS-in-JS ソリューション(例えば、Styled Components のような)を確認してください。

styled-jsxを使用した component は次のようになります：

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  );
}

export default HelloWorld;

より多くの例については、styled-jsx ドキュメンテーションをご参照ください。

JavaScript を無効にする

はい、JavaScript を無効にしても、CSS は production build(next start)で引き続きロードされます。 development の際には、FastRefresh による最適な開発者体験を提供するために、require JavaScript を有効にする必要があります。