嵌套类选择器在 next.js sass 中不起作用

Question

我在 next.js 中使用 scss 模块，并希望使用像这样的嵌套类选择器：

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

但这似乎不适用于以下组件：

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

由于某种原因，样式不适用于标签<span>。这段代码有什么问题吗？

Answer 1

您可以使用:global使嵌套类工作：

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

那么你可以这样使用：

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>
    )
  }
}

Answer 2

我有点不清楚，但似乎我需要从模块中提取这两个类。像这样：

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>
    )
  }
}

上面的代码工作得很好。