Javascript 为什么自定义css类不能处理React语义UI元素？

我用react语义ui创建了卡片，我想通过css类添加一些额外的样式

一个例子是：

我添加了带有框阴影属性的自定义“card”类，但不应用该样式

          HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

有人能解决如何向React语义ui组件添加自定义css类的问题吗

---

谢谢

因为

class

在JavaScript中是一个关键字，所以您应该在React中使用

className

而不是

class

<Card className='card'>

---

给你的类名起一个更具体的名字，比如索赔卡。之后，在css中，您需要通过将类名添加到该组件的现有语义的css中来覆盖语义的默认css。在你的情况下，可能是这样的

.ui.card.claim_Card {
  background: #455332; //for example
}

---

这将使您的css规则更加具体，并将覆盖默认的语义css。无论如何，在浏览器检查器中检查要为元素设置样式并使用该类名（在本例中为.ui.card）的css类，然后在其上添加类名定义和规则。

Steel不起作用。这里是截图：感谢rply。如果您提供了css代码，这会很有帮助。我更新了帖子，添加了App.js（Html部分）App.css文件。你好，Lazare，这是我问题的解决方案。再次感谢你，小子！

.ui.card.claim_Card {
  background: #455332; //for example
}