React 嵌套类名样式不生效

等下吃什么？

于 2024-09-12 10:33:04 发布

阅读量141

点赞数 2

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_44240581/article/details/142168364

版权

React 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

修改前

父级.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>
    )
}