Theming and customizing styles - React-Bootstrap

Generally, if you stick to the Bootstrap defined classes and variants, there isn't anything you need to do to use a custom theme with React-Bootstrap. MenuGettingstartedIntroductionWhyReact-BootstrapThemingSupportRTLServer-sideRenderingLayoutFormsComponentsUtilitiesMigratingAboutThemingandcustomizingstylesGenerally,ifyousticktotheBootstrapdefinedclassesandvariants, thereisn'tanythingyouneedtodotouseacustomthemewith React-Bootstrap.Itjustworks.Butwealsomakecoloringoutsidethe lineseasytodo.Newvariantsandsizes#Customvariantsandsizesshouldfollowthepatternofthedefault Bootstrapvariants,anddefinecssclassesmatching: component-*.React-Bootstrapbuildsthecomponent classNamesinaconsistentwaythatyoucanrelyon.For instancethiscustomButton.<> {` .btn-flat{ background-color:purple; color:white; } .btn-xxl{ padding:1rem1.5rem; font-size:1.5rem; } `} flatbutton ><>{`.btn-flat{background-color:purple;color:white;} .btn-xxl{padding:1rem1.5rem;font-size:1.5rem;}`} flatbutton>CopyPrefixingcomponents#Insomecasesyoumayneedtochangethebaseclass"prefix"ofoneor morecomponents.Youcancontrolhowacomponentprefixesitsclasses locallybychangingthebsPrefixproporgloballyviathe ThemeProvidercomponent.Changingprefixesisanescapehatchandgenerallyshouldn'tbeused.<> {/*Hint:inspectthemarkuptoseehowtheclassesdiffer*/} MyButton {''} Superbutton ><>{/*Hint:inspectthemarkuptoseehowtheclassesdiffer*/}MyButton{''}Superbutton>Copy