Пользовательская кнопка Bootstrap SASS не отображается в таблицах или на картах?

Question

Я создал следующий SCSS, чтобы сделать то, что раньше было похоже на btn-default, в Boostrap 3. Если я использую кнопку непосредственно на странице, она отображается, как и ожидалось.Однако, если я использую внутри таблицы или карты, то все, что я вижу, это граница текста.Фон прозрачный, а цвет шрифта синий, как гиперссылка, а не черный.

Вот все, что я добавил.

.btn-default {
    @extend .btn;
    border-color: #BCBCBC;
}

Вот как я его использую.

<button type="button" id="btnReset" class="btn-default btn-sm">
    <span class="fas fa-sync-alt" aria-hidden="true"></span> Reset
</button>

ОБНОВЛЕНИЕ - ИСПРАВЛЕНИЕ

Исходя из приведенных ниже предложений, я пришел к такому выводу.Это не совсем цвет BS3, но мне понравилось, что он немного темнее, чем тот, что использовал BS3.

.btn-default {
    $color-bg: #DCDCDC;
    $color-border: #BCBCBC;
    $hover-bg: #BFBFBF;
    $active-bg: #BFBFBF;

    @include button-variant( $color-bg, $color-border, $hover-bg, darken($color-border, 10%), $active-bg, darken($color-border, 12.5%) );
}

Answer 1

Это в основном дубликат: Как установить цвет текста пользовательской кнопки в Bootstrap 4 и Sass?

Вот как это делается специально для btn-default ...

.btn-default {
    @include button-variant(#ffffff, #cccccc, #e6e6e6, #adadad, #e6e6e6, #adadad);
}

Тогда он будет работать везде, где он используется: https://www.codeply.com/go/luuFNjrIpt

Answer 2

Для создания новых стилей кнопок вы должны использовать миксин button-variant, поставляемый с Bootstrap 4.

Например;таким образом я создал кнопку white .

.btn-white {
    $color-bg: #ffffff;
    $color-border: $border-color;
    $hover-bg: #84898F;
    $active-bg: #84898F;

    @include button-variant(
            $color-bg,
            $color-border,
            $hover-bg,
            darken($color-border, 10%),
            $active-bg,
            darken($color-border, 12.5%)
    );
}

Это будет применять стили color только к классу кнопки, но все равно будет выглядеть как Bootstrap 4button.

В Bootstrap 4 нет ничего, что помогло бы вам вернуть внешний вид определенного стиля кнопки в Bootstrap 3. Вам просто нужно будет вручную применить стили к классу.