Theming and customizing styles

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. It just works. But we also make coloring outside the lines easy to do.

New variants and sizes

Custom variants and sizes should follow the pattern of the default Bootstrap variants, and define css classes matching: component-*. React-Bootstrap builds the component classNames in a consistent way that you can rely on. For instance this custom Button.

结果

Loading...

实时编辑器

import Button from 'react-bootstrap/Button'; function VariantsExample() { return ( <> <style type="text/css"> {` .btn-flat { background-color: purple; color: white; } .btn-xxl { padding: 1rem 1.5rem; font-size: 1.5rem; } `} </style> <Button variant="flat" size="xxl"> flat button </Button> </> ); } export default VariantsExample;

import Button from 'react-bootstrap/Button';

function VariantsExample() {
  return (
    <>
      <style type="text/css">
        {`
    .btn-flat {
      background-color: purple;
      color: white;
    }

    .btn-xxl {
      padding: 1rem 1.5rem;
      font-size: 1.5rem;
    }
    `}
      </style>

      <Button variant="flat" size="xxl">
        flat button
      </Button>
    </>
  );
}

export default VariantsExample;

Prefixing components

In some cases you may need to change the base class "prefix" of one or more components. You can control how a component prefixes its classes locally by changing the bsPrefix prop or globally via the ThemeProvider component.

警告

Changing prefixes is an escape hatch and generally shouldn't be used.

结果

Loading...

实时编辑器

import ThemeProvider from 'react-bootstrap/ThemeProvider'; import Button from 'react-bootstrap/Button'; function PrefixesExample() { return ( <> {/* Hint: inspect the markup to see how the classes differ */} <ThemeProvider prefixes={{ btn: 'my-btn' }}> <Button variant="primary">My Button</Button> </ThemeProvider> <Button bsPrefix="super-btn" variant="primary"> Super button </Button> </> ); } export default PrefixesExample;

import ThemeProvider from 'react-bootstrap/ThemeProvider';
import Button from 'react-bootstrap/Button';

function PrefixesExample() {
  return (
    <>
      {/* Hint: inspect the markup to see how the classes differ */}
      <ThemeProvider prefixes={{ btn: 'my-btn' }}>
        <Button variant="primary">My Button</Button>
      </ThemeProvider>
      <Button bsPrefix="super-btn" variant="primary">
        Super button
      </Button>
    </>
  );
}

export default PrefixesExample;