Как обновить стиль элемента React с помощью className - PullRequest
Новая
       16

Как обновить стиль элемента React с помощью className

0 голосов
/ 09 мая 2018

Итак, я использую библиотеку пользовательского интерфейса Ant Design с моим приложением create response, что затрудняет мне редактирование стиля более сложных компонентов Ant Design. Как индикатор выполнения по умолчанию синий:

enter image description here

Я хочу сделать его другим цветом, и когда я смотрю на HTML в консоли Chrome, я вижу:

enter image description here

className для этого элемента - ant-progress-bg. Можно ли как-нибудь написать код в своем компоненте React и обновить стиль с style={width: "12.5%, height: 8} на style={color: 'red', width: "12.5%, height: 8}?

Это весь код React, который мне нужно написать, чтобы сгенерировать индикатор выполнения с помощью библиотеки дизайна ant: 

import { Progress } from 'antd';

<Progress
    percent={percentVotes}
    showInfo={false}
    status="active"
/>

Я также попытался импортировать CSS и добавил CSS-класс "ant-progress-bg" со стилем, который мне нужен, но он ничего не сделал.

В моем Matches.css файле у меня есть: 

.ant-progress-bg {
    color: red;
}

, который я импортирую в файл Matches.js с import './Matches.css';

1 Ответ

0 голосов
/ 09 мая 2018

Вот демоверсия https://codesandbox.io/s/k0m0nl1my3

Если вы хотите изменить цвет индикатора выполнения для всех мест, переопределите этот класс 

.ant-progress-bg {
  background-color: red !important;
}

И если вы хотите изменить цвет только для этого конкретного индикатора, добавьте дополнительный класс, например 

.my-progress-bar .ant-progress-bg {
  background-color: red !important;
}

Если вы используете less для своих пользовательских стилей, это еще проще 

.my-progress-bar {
  .ant-progress-bg {
    background-color: red !important;
  }
}   

<Progress
  percent={percentVotes}
  showInfo={false}
  status="active"
  className="my-progress-bar"
/>
...