为什么定制的CSS类不适用于Reaction-语义-UI元素？

我创建了带有反应-语义-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>

代码的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类添加到Reaction-语义-UI组件中？

谢谢

推荐答案

为您的类名指定一个更具体的名称，如CLARAME_CARD。在此之后，在您的CSS中，您需要通过将您的类名称添加到该组件的现有语义的CSS中来覆盖Sematic的默认CSS。在您的情况下，它将类似

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

这将使您的CSS规则更加具体，并将覆盖默认的语义CSS。无论如何，在浏览器检查器中检查您想要样式化和使用类名称(在本例中为.ui.Card)元素应用了哪个CSS类，并在其上添加您的类名称定义和规则。

这篇关于为什么定制的CSS类不适用于Reaction-语义-UI元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，