Как настроить компоненты response-bootstrap?

Я не уверен, что это ответ на ваш вопрос, но Документация четко предоставляет примеры. Например, Button

Реквизит

+--------+---------+--------+--------------------------------------------+
|  Name  |  Type   | Default| Description                                |
+--------+---------+--------+--------------------------------------------+
|bsClass |  string | 'btn'  | Base CSS class and prefix for the component|
+--------+---------+--------+--------------------------------------------+

Его можно изменить, чтобы добавить собственный класс CSS в компонент Button. Также компонент можно изменить с помощью настройки componentClass.

<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>

Где custom-class - класс CSS, который может

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

Fiddle с примером использования bsClass.

Встроенные стили:

Согласно ошибке, встроенные стили официально не поддерживаются.

вы хотите использовать актуальную опору стиля. bsClass предназначен для настройки способа применения классов начальной загрузки css к компонентам, а не к встроенным стилям.

Но проблема гласит, что:

Вы можете использовать их, если хотите. У нас нет официального мнения.

ПРИМЕЧАНИЕ. Не все компоненты, предоставляемые response-bootstrap, допускают настройку класса через bsClass, например Хлебные крошки

Я думаю, что ответ на этот вопрос для большинства людей (таких как я) заключается в том, что можно добавлять собственные стили в компоненты реакции-начальной загрузки, используя опору style. Например. для кнопки по умолчанию с синим текстом:

<Button bsStyle="default" style={style.blueButton}>Button Text</Button>

or

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>

Пример с SCSS

Согласно Docs React Bootstrap, вы можете создать собственный класс со свойством bsPrefix = custom-class.

Затем в своей таблице стилей вы можете переопределить стили, используя специфику css.

 import styles from './RocketCard.module.scss';

 function RocketCard({ name }) { return (
     <div className={styles.rocketCardContainer}>
      {name}
      <Card className={styles.customCard} bsPrefix="customCard">
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and 
            make up the 
            bulk of the card's
            content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
     </div>
    );
    }



// SCSS File
.rocketCardContainer {
  background-color: red;
  .customCard {
    width: 100%;
  }
}

У меня была такая же проблема, я искал несколько блогов и получил ответ! Important. Я искал более общее решение, но не нашел другого решения, кроме добавления! Important для каждого элемента, который мы хотим переопределить.

.form-control { 
  border-radius: 30px !important;
  background-color: #f4f6f5 !important;
}