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.

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