为什么自定义css类不能用于React-Semantic-UI元素？

Question

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

一个例子是：

我使用box-shadow属性添加自定义'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>

CSS部分代码：App.css

 .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

有人有解决方案如何将自定义css类添加到React-semantic-ui组件中？

谢谢

Answer 1

为className指定一个更具体的名称，例如claim_Card。在你的css之后，你需要通过将className添加到该组件的现有语义的css来覆盖sematic的默认css。在你的情况下，它会是这样的

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

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

Answer 2

由于class是JavaScript中的关键字，因此您应该在React中使用className而不是class。

<Card className='card'>