css - 局部范围的 CSS（子组件）

Question

有没有办法让我不需要为每个子组件添加标签的本地范围的 CSS？

例如，使用 css 模块，我想做类似的事情：

import style from "./MyStyles.module.scss";

接着：

<div className={style.componentA}>
  <img src="A.jpg" />
  <img src="B.jpg" />
  <img src="C.jpg" />
</div>

MyStyles.module.scss 看起来像：

.componentA {
    display: flex;
    flex-direction: column;

    img {
      width: 50px;
      height: 100px;
    }
}

虽然这适用于 .componentA，但样式不会传播到 img 组件。有没有办法做到这一点，而不必className={style.myImage}为每个 img 组件添加类似的东西？

标签： cssreactjssasscss-modules