React项目中原生CSS嵌套无法生效问题求助

我一直在React项目中使用Sass作为CSS预处理器，因为它支持嵌套特性。如今原生CSS已新增嵌套功能，但我在React（Next.js+CSS Modules）项目中使用时却无法生效。不过该嵌套代码在纯HTML+CSS环境下可正常运行。

纯HTML和CSS环境（可正常运行） #

以下代码在纯HTML和CSS环境中可正常运行：

.selection {
  background-color: blue;
  color: white;
  
  & #gender {
    border: 2px solid red;
  }
}

<div class="selection">
  <label htmlFor="gender">Gender: </label>
  <select name="gender" id="gender">
    <option value="">Select Gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
</div>

Next.js + CSS Modules环境（无法生效） #

以下代码无法生效：

import styles from "./form.module.css"

export default function Gender() {
  return(
    <div className={styles.selection}>
      <label htmlFor="gender">Gender: </label>
      <select name="gender" id="gender">
        <option value="">Select Gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>
    </div>
  )
}

.selection {
  background-color: blue;
  color: white;

  & #gender {
    border: 2px solid red;
  }
}

内容的提问来源于stack exchange，提问作者Mohammad Masood Alam