Style JSX con Preprocesadores

Style JSX permite el uso de preprocesadores por medio de plugins.

Primero se debe de instalar el plugin del preprocesador que se desea usar:

• styled-jsx-plugin-sass
• styled-jsx-plugin-postcss
• styled-jsx-plugin-stylelint
• styled-jsx-plugin-less
• styled-jsx-plugin-stylus

Finalmente, solo se debe de crear un archivo .babelrc y agregar la siguiente configuración:

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            "styled-jsx-plugin"
          ]
        }
      }
    ]
  ]
}

Cambiar styled-jsx-plugin por el plugin a usar.

Con esa configuración solo debes agregar el sass/postcss/less/stylus en el style jsx y todo va a funcionar automáticamente.

Ejemplo con sass:

  <style jsx>{`
    .menu {
      z-index: 10;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      ul {
        list-style: none;
        a {
          text-decoration: none;
          color: white;
        }

        a:hover {
          color: red;
        }
      }
    }
  `}</style>