Я создал карточку с помощью response-semantic-ui, я хочу добавить несколько дополнительных стилей через класс css.

Один из примеров :

Я добавляю собственный класс «card» со свойством box-shadow, и этот стиль не применяется.

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

Есть ли у кого-нибудь решение, как добавить собственный класс css в компоненты React-semantic-ui?

Спасибо

4
James Delaney 15 Сен 2018 в 17:39

2 ответа

Лучший ответ

Дайте вашему className более конкретное имя, например, Claim_Card. После этого в вашем css вам нужно переопределить css семантики по умолчанию, добавив свой className в существующий семантический css для этого компонента. В вашем случае это будет что-то вроде

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

Это придаст вашему правилу css больше специфичности и переопределит семантический css по умолчанию. В любом случае, проверьте в инспекторе браузера, какой класс css применяется к вашему элементу, который вы хотите стилизовать, и используйте это имя класса (в данном случае .ui.card) и добавьте к нему определение и правила имени класса.

4
Lazar Nikolic 16 Сен 2018 в 16:18

Поскольку class является ключевым словом в JavaScript, вам следует использовать className вместо class в React.

<Card className='card'>
4
solooo7 15 Сен 2018 в 15:05