Почему пользовательский класс css не работает с элементами React-Semantic-UI?

Я создал карточку с помощью 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?

Спасибо


reactjs javascript css semantic-ui-react semantic-ui
person James Delaney    schedule 15.09.2018    source источник

Ответы (2)


arrow_upward
8
arrow_downward

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

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

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

person Lazar Nikolic    schedule 16.09.2018
comment
Привет, Лазар, это решение моей проблемы. Еще раз спасибо, братэ! - person James Delaney; 16.09.2018

arrow_upward
4
arrow_downward

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

<Card className='card'>
person Darvesh    schedule 15.09.2018
comment
Сталь не работает. Вот снимок экрана: prntscr.com/kuqtr6 Спасибо за rply. - person James Delaney; 15.09.2018
comment
Было бы полезно, если бы вы предоставили свой код css. - person Darvesh; 15.09.2018
comment
Я обновил пост, добавил файл App.js (Html-часть) App.css. - person James Delaney; 16.09.2018