Динамически переопределять переменные CSS Bootstrap в React?

Не уверен, что это сработает, но идея ...
Не могли бы вы отредактировать свой файл bootstrap.css как этот
: root {--primary: unset; }

Таким образом, вам не придется перезаписывать стили начальной загрузки?

На самом деле нет простого способа сделать это. Вы можете сгенерировать CSS для «пользовательских» основных цветов в SASS, а затем добавить «корневой» класс основного цвета к компоненту следующим образом ...

SASS для генерации «первичного» цвета Bootstrap CSS

/* import the necessary Bootstrap files */
@import "bootstrap";

@mixin build-primary-classes($color) {
    /* background classes */
    @include bg-variant(".bg-primary", $color);
    
    /* btn classes */
    .btn-primary {
        @include button-variant($color, $color);
    }
  
    .btn-outline-primary {
        @include button-outline-variant($color);
    }
    
    /* text- classes */
    @include text-emphasis-variant(".text-primary", $color);
    
    /* badge classes */
    .badge-primary {
        @include badge-variant($color);
    }
    
    /* borders */
    .border-primary {
        border-color: $color !important;
    }
}

$customprimarycolors: (
  "purple": purple,
  "red": red,
  "orange": orange
);

@each $colorName, $color in $customprimarycolors {
  .#{$colorName} {
    @include build-primary-classes($color);
  }
}

JS

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return( 
        <div className = {this.props.className}>Hello <button className = "btn btn-primary">Button</button></div>
    );
  }
}

ReactDOM.render(<Hello className = "red" />, document.getElementById('root'));

Демо Codeply: https://codeply.com/go/R4X5x8taiH

ЧЕСТНО ГОВОРЯ ... Я не уверен, стоит ли попытаться перезаписать в CSS некоторые части классов, построенных при начальной загрузке, на переменную цвета, такую ​​как $primary, но пусть остальные классы построены на той же переменной, что и она.

Вот так возникают проблемы ...

ИМХО лучшим способом было бы сделать это так, как это предоставляет Bootstrap:

При изменении в SASS базовой переменной $primary на новый желаемый цвет в Bootstrap цвет изменится, и классы будут там. Или добавление нового цвета $additional-color и добавление цвета для карты $theme-color, и все дополнительные классы создаются на лету ... Просто взгляните на документацию ... это намного проще, чем кажется на первом Смотреть:

https://getbootstrap.com/docs/5.0/customize/color/

Итак, да: в темах SASS можно просто установить / добавить цветовые вары.

Но если в проекте невозможно использовать SASS или прямая настройка по каким-то причинам не нужна ... в сети есть множество бесплатных простых в использовании инструментов для создания тем, которые сделают эту работу за вас. Тогда вы сможете импортировать чистый и согласованный CSS Bootstrap с желаемыми цветами. Потому что это так просто. Bootstrap так же успешен (что не означает, что мне / вам он должен понравиться). Поскольку Bootstrap 5 все еще является бета-версией, здесь пример для BS4 ...

http://pikock.github.io/bootstrap-magic/app/index.html#!/editor

ПРИМЕЧАНИЕ: только изменение / перезапись цветовых переменных CSS в файле CSS недостаточно, поскольку цвета в классах жестко закодированы в исходные шестнадцатеричные цвета. Вам действительно придется перезаписать исходные классы, что приведет к дублированию структур кода.