Locally scoped CSS (child components)

Question

Is there a way to have locally scoped CSS where I don't need to add a tag to every sub-component?

For example, using css modules, I want to do something like:

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

And then:

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

Where MyStyles.module.scss looks like:

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

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

While that works for .componentA, the styles aren't propogating to the img components. Is there a way to do this without having to add something like className={style.myImage} to every img component?