Как переопределить цвета реакции-начальной загрузки?

Question

Я искал, как это изменить, но ни одно из решений не помогло мне.

Я хочу переопределить цвет кнопки реакции-начальной загрузки.

Это решение, как показано ниже, прекрасно работает и это именно то, что я хочу сделать:

<Button
   block
   style={{backgroundColor: '#0B0C10', borderColor: '#45A293', color: '#45A293', borderRadius: '100px'}}
>
   sample text
</Button>

Но я не хочу переписывать его каждый раз, когда использую кнопку, поэтому я хотел бы получить решение с помощью css, я пробовал использовать это:

.custom-button {
    background-color: #1F2833;
    border-color: #45A293;
    border: 3px solid-transparent;
    color: #45A293;
    border-radius: 100px;
}

А затем передать его в className, например, так: className = "custom-button", но на самом деле это не работает.

Я использую кнопку от реакции-начальной загрузки

import {Button} from "react-bootstrap";

Стили с начальной загрузки

import 'bootstrap/dist/css/bootstrap.min.css';

Использование версий, указанных ниже:

"react-bootstrap": "^1.0.0-beta.5",
"bootstrap": "^4.3.1",

Answer 1

Стили, применяемые с использованием атрибута style="" элементов HTML, более специфичны , чем стили, применяемые в классах, поэтому ваше первое решение сработало.Добавление !important в конце стилей - это один из способов переопределения других стилей, более специфичных, чем класс .custom-button.

Одно быстрое решение, которое приходит мне в голову, которое гарантирует, что вы не будете повторятьсамостоятельно хранит стили в объекте и импортирует их из файла.

styles.js

const styles = {
    customButton: {
        backgroundColor: '#0B0C10',
        borderColor: '#45A293',
        color: '#45A293',
        borderRadius: '100px'
    }
};

export default styles;

Component.jsx

import { styles }  from './styles.js'

<Button
   block
   style={styles.customButton}
>
   sample text
</Button>

В противном случае вы бы получилииграть с прикреплением идентификаторов или создавать более специфичные селекторы CSS.

Answer 2

Вот пример:

   background-color: #1F2833 !important;

Добавить! Важно везде в конце