Почему response-bootstrap не использует мой собственный стиль? - PullRequest
Новая
       5

Почему response-bootstrap не использует мой собственный стиль?

0 голосов
/ 06 февраля 2019

Я пытаюсь создать внешний интерфейс для своего API, и я использую ReactJS, а не с response-bootstrap.Я всегда ненавидел то, как bootstrap только устанавливает цвета для своих кнопок, и изменение цвета кнопок в vanilla html css легко.

Однако мой экземпляр react-bootstrap/Button, похоже, никогда не использует пользовательский CSS, который я ему назначил.Это стили, которые я пытаюсь применить к кнопке, хранящиеся в styles/style.css

.accent {
    background-color: '#666a86';
    border-color: '#FFF'
}

.accent:hover {
    background-color: '#95b8d1';
}

Я импортирую этот файл CSS в свой компонент следующим образом: 

import '../styles/style.css'

Обратите внимание наКомпонент хранится в /components/ComponentName.jsx.Я попытался присвоить класс компоненту Button, используя className, а также bsClass, и ни один из них не имеет никакого значения.Единственный способ, которым я смог стилизовать кнопку - встроенный: 

<Button style={{color:'#FFF'}}/>

Почему моя кнопка вообще не стилизуется?Он все еще привязан к синей кнопке начальной загрузки.

Обновление: Импорт загрузочного CSS в моем CSS-файле фактически работал: 

.accent {
    background-color: #666a86;
    border-color: #FFF
}

.accent:hover {
    background-color: #95b8d1;
}

@import '~bootstrap/dist/css/bootstrap.css';

1 Ответ

0 голосов
/ 06 февраля 2019

Проблема в вашем CSS, удалите кавычки из значения цвета 

.accent {
  background-color: #666a86 ;
  border-color: #FFF ;
}

.accent:hover {
  background-color: #95b8d1;
}

см. https://codesandbox.io/s/p9zq6mky4q

...