覆盖Semantic React Ui属性的CSS。

Question

我想覆盖属于 react semantic UI 的默认 Header。

目前，我将我的Header定位在div内，以便为其设置样式。

    <div className="portfolioTitle">
      <Header as="h1">Check the magic</Header>
    </div>

我使用的是div.CSS。

   .portfolioTitle {
      padding-left: 10%;
      position: relative;
      padding-bottom: 3%;
      padding-top: 3%;
    }

但我想在不使用div的情况下实现同样的效果。我试着用以下方法来实现 此法但它不为我工作。

有什么办法吗？谢谢，我想覆盖属于response semantic UI的默认Header。

Answer 1

你可以简单地给 类名道具 至 Header

请看这里的工作演示

此外，你还需要申请 !important 的样式。

注: 如果你检查元素，你会发现下面的样式被应用于 Header 由semantic ui库提供。因此，如果您想提供自定义的className，那么使用下面提到的css属性，您就必须使用下面的属性。!important.

.ui.header {
    border: none;
    margin: calc(2rem - .14285714em) 0 1rem;
    padding: 0 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-weight: 700;
    line-height: 1.28571429em;
    text-transform: none;
    color: rgba(0,0,0,.87);
}