我有一个React组件，我试图在那里为我的web应用程序设计一个按钮。我已经用同样的方法在其他组件上做了无数次了。由于某种原因，类名没有在呈现的页面中使用。我使用parceljs来捆绑我的脚本，并在浏览器中检查了源代码，css类是存在的。我试了几个小时来改变它，但没有成功。所以我向社区征求意见。
Button.tsx

import * as React from 'react'
import styles from './Button.module.css'
import cx from 'classnames'

type ButtonProps = {
  color?: 'default' | 'primary' | 'alert' | 'success'
  value: string
  onClick?: () => void
}

export const Button: React.FC<ButtonProps> = (props) => {
  const { color = 'default' } = props;
  return (
    <div className={styles.buttonContainer}> {/* part of my testing, tried wrapping everything in a div to see if the style would work */}
      <button className={cx(styles.buttonContainer, styles[color])} onClick={props.onClick}>
        <div className={styles.value}>{props.value}</div>
      </button>
    </div>
  )
}

Button.module.css

.buttonContainer {
    color: black;
}

.default {
    background: white;
    color: var(--colorBlack100);
}

.primary {
    background: var(--colorBlue80);
    color: white;
}

.alert {
    background: var(--colorAlert);
    color: white;
}

.success {
    background: var(--colorSuccess);
    color: white;
}

.buttonContainer .value {
    color: inherit;
}

index.ts-用于将所有组件组合在一起

...
export { Button } from './Button/Button'
...

索引. tsx-显示它的页面

import * as React from 'react'
import { Button } from '../Components'

const Index: React.FC = () => {
  return (
    <div>
      <Button value="Default" onClick={() => console.log("test")} color="primary" />
    </div>
  )
}

export default Index

下面是呈现的Button div

<div><button class=""><div>Default</div></button></div>

这是我使用Chromedev工具从源代码中提取的来自parcel的css，这些类存在，因此我知道parcel正在拾取它

._9p9acG_buttonContainer {
  color: #000;
}

._9p9acG_default {
  color: var(--colorBlack100);
  background: #fff;
}

._9p9acG_primary {
  background: var(--colorBlue80);
  color: #fff;
}

._9p9acG_alert {
  background: var(--colorAlert);
  color: #fff;
}

._9p9acG_success {
  background: var(--colorSuccess);
  color: #fff;
}

._9p9acG_buttonContainer ._9p9acG_value {
  color: inherit;
}

如前所述，我已经成功地用许多其他组件做到了这一点，这是唯一一个行为滑稽，我不知所措。
预先感谢你的帮助。