未应用反应样式css模块

我正在尝试设计一个react组件，应用程序是使用CreateReact应用程序创建的。出于某种原因，颜色不是通过指定类名来获取的，但是如果我对内联样式做同样的事情，它就会工作。保证金财产有效。这里有什么明显的我遗漏的吗

MyComponent.module.css
.root {
    margin: 5px;
    color: #1A7DA1;
    background: #e8810d;
    background-color: aquamarine;
}


MyComponent.js
import styles from './MyComponent.module.css';

const MyComponent = (props) => {
return (
    <chip className={styles.root} {...props}/>   //DOESNT WORK
    <chip style={{background: 'pink'}} {...props} />  //WORKS
  );

MyComponent.module.css
.根{
保证金：5px；
颜色：#1A7DA1；
背景：#e8810d；
背景颜色：海蓝宝石；
}
MyComponent.js
从“/MyComponent.module.css”导入样式；
常量MyComponent=（道具）=>{
返回(
//不起作用
//工作
);

可能是在另一个选择器中指定的颜色具有更高的特异性。您是否在浏览器（devtools inspector）中看到您的规则？它是否被其他内容覆盖？