如何将CSS模块与React使用并将样式保持在相同的（.jsx）文件中？

Question

我想在.jsx文件中编写我的 CSS模块。类似于样式组件。这是我要实现的示例（请注意，这是一个文件）：

// Cmp.jsx file

const styles = ???`
  .wrapper {
    display: flex;
      
    .name {
      color: blue;
    }
  }
`

export default function Cmp() {
  return (
    <div className={styles.wrapper}>
      <div className={styles.name}>Bob</div>
    </div>
  )
}

是否有可以做到的库？

我可以从CSS模块的WebPack加载程序导入一些内部功能以代替???？如果不是这样，请提示如果我想实现它应该查看的位置（实际上执行CSS模块导入的代码）将很有帮助。

请注意，样式的组件可以（AB）用于以类似的方式编写，但这无助于避免classNames/样式的碰撞。