Nested CSS styles are not applied in the Next.JS

Question

I'm using Nextjs with sass(1.28.0). Unfortunately, the nested css styles are not applied in the webpage. Importing the below css file as auth.module.scss and there are no import errors also. This Application involves AMP pages as well. Correct me if i'm missing anything.

 .loginForm{
    width:300px;

    .MuiFormControl-root{
      width:100%;
      margin-top:20px;
    }
}

Here is the next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  }
})

JSX

 <div className={auth.loginForm}>
   <TextField label="Email*" placeholder="Enter Email" autoComplete="current-email" />
 </div>

if you are using material UI try using there docs to override components.Using important! might work but not a good approach — Vibhav
I have updated the JSX.Please have a look. @Vibhav this app involves AMP pages also. Therefore, adding !important to styles is not a good idea.Because, those styles will be removed by AMP scripts. — code_Knight

Andrew Zheng Andrew Zheng · Accepted Answer · 2020-11-04T21:43:25

I'm using Less for my project but the config should be similar. You will need to enable CSS module config for next/sass

const withPlugins = require('next-compose-plugins');

module.exports = withPlugins(
  [
    [
      withSass,
      {
        cssModules: true,
        cssLoaderOptions: {
          sourceMap: true,
          localIdentName: '[local]___[hash:base64:5]',
          localsConvention: 'camelCase',
          camelCase: 'dashes',
        },
      },
    ],
    [withCSS],
  ],
  ....... // some other global config
);

Without next-compose-plugins, you can probably do something like the following

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  }
})

Nested CSS styles are not applied in the Next.JS

1 Answers