Why custom css class does not work on React-Semantic-UI elements?

Question

I created card with react-semantic-ui, I want to add some extra styles via css class.

One example is:

I add custom 'card' class with box-shadow property, and that style is not applied.

          HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

CSS PART OF CODE: App.css

 .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

Does someone have solution how to add custom css class to the React-semantic-ui components?

Thanks

Lazar Nikolic · Accepted Answer · 2018-09-16 16:18:24Z

11

Give your className a bit more specific name, like claim_Card. After that in your css you need to override sematic's default css by adding your className to existing semantic's css for that component. In your case it would be something like

.ui.card.claim_Card {
  background: #455332; //for example
}

This will give your css rule more specificity and will override default semantic css. Anyway, check in your browser inspector what css class is applied to your element that you want to style and use that className (in this case .ui.card) and add on it your className definition and rules.

answered Sep 16, 2018 at 16:18

Lazar Nikolic

4,4041 gold badge26 silver badges46 bronze badges

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

1 Comment

James Delaney Over a year ago

Hello Lazare, that is solution for my problem. Thank you again brate!

Darvesh · Accepted Answer · 2018-09-15 15:05:59Z

4

Since class is a keyword in JavaScript, you should use className instead of class in React.

<Card className='card'>

edited Sep 15, 2018 at 15:05

answered Sep 15, 2018 at 14:57

Darvesh

5647 silver badges17 bronze badges

3 Comments

James Delaney Over a year ago

Steel doesn't work. Here is screenshot: prntscr.com/kuqtr6 Thanks for rply.

Darvesh Over a year ago

It would have been helpful if you had provided your css code.

James Delaney Over a year ago

I updated post, added App.js(Html part) App.css file.

Collectives™ on Stack Overflow

Why custom css class does not work on React-Semantic-UI elements?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related