React 嵌套类名样式不生效

修改前

父级.blog样式生效，子级.circle样式不生效

// app/blog/page.js
import styles from "./page.module.scss"export default function Blog () {return (<div className={styles.blog}><div className='circle'><div /></div></div>)
}

/* app/blog/page.module.scss */
.blog {color: red;.circle {display: inline-block;transform: translateZ(1px);box-sizing: border-box;color: #1c4c5b;& > div {display: inline-block;width: 64px;height: 64px;margin: 8px;background: currentColor;border-radius: 50%;box-sizing: border-box;}}
}

修改后

// app/blog/page.js
import styles from "./page.module.scss"export default function Blog () {return (<div className={styles.blog}><div className={styles.circle}><div /></div></div>)
}