web-dev-qa-db-fra.com

Comment personnaliser les composants react-bootstrap?

Quel est le meilleur moyen de remplacer les classes css/personnaliser les composants react-bootstrap? - (J'ai lu la documentation, et à moins que quelque chose ne me manque, ce n'est pas couvert).

D'après ce que j'ai lu, il semble que ce soit un choix entre les modules inline (radium) et css, mais lequel est le meilleur et pourquoi?

reactjsreact-bootstrapinline-stylesreact-css-modules
5
AloeVeraForty

Je ne sais pas si cela répond à votre question mais Documentation fournissez clairement des exemples. Par exemple Bouton

Accessoires 

 + -------- + --------- + -------- + ---------------- ---------------------------- + 
 | Nom | Type | Par défaut | Description | 
 + -------- + --------- + -------- + -------------- ------------------------------ + 
 | bsClass | chaîne | 'btn' | Classe CSS de base et préfixe du composant | 
 + -------- + --------- + -------- + ------- ------------------------------------- +

Celui-ci pourrait être modifié pour ajouter une classe CSS personnalisée à votre composant Button. Le composant peut également être changé avec la configuration de ComponentClass.

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

Où custom-class est une classe CSS qui pourrait 

fournir de nouveaux styles CSS, non Bootstrap, pour un composant.

Fiddle avec un exemple d'utilisation de bsClass.

Styles en ligne:

Selon bug filled, les styles en ligne ne seront pas officiellement supportés. 

vous voulez utiliser le style prop prop. La classe bsClass permet d'ajuster la manière dont les classes de bootstrap css sont appliquées aux styles de composants non en ligne

Mais issue déclare que:

Vous êtes libre de les utiliser si vous voulez. Nous n'avons pas d'opinion formelle.

NOTETous les composants fournis par react-bootstrap n'autorisent pas la personnalisation de classe via bsClass, par exemple Breadcrumb

9
wolendranh

Je pense que la réponse à cette question pour la plupart des gens (comme moi) est qu’il est possible d’ajouter des styles personnalisés aux composants réagissant à l’amorçage à l’aide de la propriété style. Par exemple. pour un bouton par défaut avec du texte bleu:

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

ou 

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