CSS переопределение Semanti c Свойства React Ui

Question

Я хочу переопределить заголовок по умолчанию, который относится к реакции semanti c UI.

В настоящее время я разместил свой заголовок внутри 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. Я пытался реализовать это решение , но оно не работает у меня.

Есть идеи? Спасибо.

Answer 1

Вы можете просто передать свойство className Header

См. Рабочую демонстрацию здесь

Также вам необходимо применить !important к стилям.

Примечание : Если вы проверите элемент, вы увидите, что следующие стили применяются к Header библиотекой semanti c ui. Итак, если вы хотите предоставить настраиваемое имя класса, а затем с указанными ниже свойствами 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);
}