CSS overriding Semantic React Ui Properties

Question

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.

Guru Hadadi · Accepted Answer · 2020-06-17 13:20:28Z

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);
}

edited Jun 17, 2020 at 13:20

answered Jun 17, 2020 at 13:03

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gusya59 Over a year ago

Tried it. But it doesn't working. Am I doing it wrong? <Header className="portfolioTitle" as="h1"> Check the magic </Header> Also implemented !important. Doesn't help either.

Guru Hadadi Over a year ago

add !important to your styles..see the code in the demo link

Guru Hadadi Over a year ago

i've updated the answer with more explanation ... hope it is clear.

gusya59 Over a year ago

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.

Collectives™ on Stack Overflow

CSS overriding Semantic React Ui Properties

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related