时间戳

首页 > 解决方案 > CSS 覆盖语义 React Ui 属性

css - CSS 覆盖语义 React Ui 属性

问题描述

我想覆盖属于反应语义 UI 的默认 Header。

目前我将我的 Header 放置在 div 中以便对其进行样式设置。

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

CSS：

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

这个解决方案有效，但我想在不使用 div 的情况下做同样的事情。我试图实施这个解决方案，但它对我不起作用。

有任何想法吗？谢谢。

标签： cssreactjssemantic-uisemantic-ui-react

解决方案

您可以简单地将className 道具提供给Header

在此处查看工作演示

您还需要应用!important到样式。

注意：如果您检查元素，您会看到Header语义 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);
}

推荐阅读