CSS selector not working on react CSS module-CodePudding

I have a react component with those things:

CSS:

.carousel-container > * {
  flex-grow: 1;
  flex-shrink: 0;
}

.carousel-container.render-1 > * {
  width: calc(100% - 10rem);
}

JSX:

import './carousel.css'

<div className={classNames('carousel-container', 'render-1')}>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 2</div>
</div>

Everything works well, the div item is set with the width from carousel-container.render-1

But when I tried to do the same using React CSS Module the div item don't get the width from carousel-container.render-1

.carouselContainer > * {
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
}

.carouselContainer.render-1 > * {
  width: calc(100% - 10rem);
}

JSX:

import styles from './mycss.module.css'

<div className={classNames(`${styles.carouselContainer}`, 'render1')}>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 2</div>
</div>

Is there a way to do it?

CodePudding user response：

Does it work if you use the React CSS module logic for the render-1 class selector as well?

<div className={`${styles.carouselContainer} ${styles.render-1}`}>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 2</div>
</div>