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

admin管理员组

文章数量:1243198

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 ponents?

Thanks

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 ponents?

Thanks

• javascript
• css
• reactjs
• semantic-ui
• semantic-ui-react

Share Improve this question Follow edited Sep 16, 2018 at 17:23 Lazar Nikolic 4,39411 gold badge2626 silver badges4646 bronze badges asked Sep 15, 2018 at 14:39 James DelaneyJames Delaney 1,77622 gold badges2121 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 ponent. 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.

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

<Card className='card'>

本文标签： javascriptWhy custom css class does not work on ReactSemanticUI elementsStack Overflow