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

Question

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

一个例子是:

我添加自定义 'card' class 和 box-shadow 属性，但没有应用该样式。

          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 class 添加到 React-semantic-ui 组件吗？

谢谢

Answer 1

因为 class 是 JavaScript 中的关键字，你应该在 React 中使用 className 而不是 class。

<Card className='card'>

Answer 2

给你的class名字起一个更具体的名字，比如claim_Card。之后，在您的 css 中，您需要通过将 className 添加到该组件的现有语义 css 来覆盖语义的默认值 css。在您的情况下，它类似于

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

这将使您的 css 规则更加具体，并将覆盖默认语义 css。无论如何，在你的浏览器检查器中检查什么 css class 应用到你想要设置样式的元素并使用那个 className（在本例中为 .ui.card）并添加在上面你的class名称定义和规则。

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

Why custom css class does not work on React-Semantic-UI elements?

javascript

css

reactjs

semantic-ui

semantic-ui-react