Nested class selectors not working in next.js sass

user_13502024 0
Viewed 3290

I'm using scss modules in next.js and want to use nested class selectors like this:

.div {
  .x {
    color: red;
  }
}

But it seems that this won't work with the following component:

import React from 'react'
import styles from './my-component.module.scss'

export default class MyComponent extends React.Component {
  public render() {
    return (
      <div className={styles.div}>
        <span className='x'>ololo</span>
      </div>
    )
  }
}

For some reason, the styles do not apply to the <span> tag. Whats wrong with this code?

next.js sass
2 Answers

You can use :global to make nested class work:

.div {
  :global .x {
    color: red;
  }
}

then you can use like this:

import React from 'react'
import styles from './my-component.module.scss'

export default class MyComponent extends React.Component {
  public render() {
    return (
      <div className={styles.div}>
        <span className='x'>ololo</span>
      </div>
    )
  }
}
user_70398700

It was a bit unclear for me, but it seems that I need to extract both classes from the module. Like this:

import React from 'react'
import styles from './my-component.module.scss'

export default class MyComponent extends React.Component {
  public render() {
    return (
      <div className={styles.div}>
        <span className={styles.x}>ololo</span>
      </div>
    )
  }
}

The code above works just fine.

user_135020240
Related