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