1

I want to override default Header that belong to react semantic UI.

Currently I positioned my Header inside div in order to style it.

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

CSS:

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

This solution is working, but I want to do the same without using div. I tried to implement this solution, but it's not working for me.

Any ideas? Thanks.

gusya59
  • 45
  • 7

1 Answers1

1

You can simply give the className prop to the Header

See working demo here

Also you need to apply !important to the styles.

Note: If you inspect element, you will see that the below styles are applied to Header by semantic ui library. So if you want to provide custom className then with below mentioned css properties then you have to use !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);
}
gdh
  • 13,114
  • 2
  • 16
  • 28
  • Tried it. But it doesn't working. Am I doing it wrong?
    Check the magic
    Also implemented !important. Doesn't help either.     – gusya59 Jun 17 '20 at 13:11
  • add !important to your styles..see the code in the demo link – gdh Jun 17 '20 at 13:12
  • i've updated the answer with more explanation ... hope it is clear. – gdh Jun 17 '20 at 13:20
  • Yes. It is some weird bug in my code. When I copy the code into the sandbox everything is working. Thank you. I will find what's wrong with it. – gusya59 Jun 17 '20 at 13:24