Почему React-Bootstrap дублирует пользовательские classNames в элементе?

Question

Я использую React-Bootstrap и применяю некоторые пользовательские классы к компоненту, используя bsClass: Пример:

<Button bsClass="exit action">Exit</Button>

Визуализированный HTML-код:

<button type="button" class="exit action exit action-default">Exit the Exam</button>

Почему повторяются имена классов (выход и действие)?

Answer 1

Из React-Bootstrap документации для компонента кнопки, https://react -bootstrap.github.io / компоненты / кнопки / ,

bsClass: String - Базовый класс CSS и префикс для компонента. Как правило, следует только изменить bsClass, чтобы обеспечить новые не-Bootstrap стили CSS для компонента.

Итак, bsClass - это просто базовый класс, который добавляется к кнопке, и префикс для фактического класса стилей для сопоставления стандартов начальной загрузки.

<Button>Default</Button> 

генерирует

<button type="button" class="btn btn-default">Default</button>

и, следовательно,

<Button bsStyle="primary" bsClass="custom">Default</Button>

будет генерировать

<button type="button" class="custom custom-primary">Default</button>

и в вашем случае, согласно соглашению, -default получил префикс с указанной вами exit action строкой и стал exit action-default.
Либо у вас есть структура вашего css, чтобы сохранить этот стандарт, либо в идеале, рекомендуется использовать bootstrapUtils для создания пользовательских стилей. https://react -bootstrap.github.io / утилиты / заказные-стили /