主题和自定义样式

通常，如果您坚持使用 Bootstrap 定义的类和变体，则无需执行任何操作即可将自定义主题与 React-Bootstrap 一起使用。它可以正常工作。但我们也让在界限之外着色变得容易。

新的变体和尺寸

自定义变体和尺寸应遵循默认 Bootstrap 变体的模式，并定义匹配的 css 类：component-*。React-Bootstrap 以一致的方式构建组件 classNames，您可以依赖它。例如，这个自定义 Button。

结果

正在加载...

实时编辑器

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;

组件前缀

在某些情况下，您可能需要更改一个或多个组件的基类“前缀”。您可以通过更改 `bsPrefix` 属性（本地控制）或通过 `ThemeProvider` 组件（全局控制）来控制组件如何在其类名前添加前缀。

注意

更改前缀是一种应急措施，通常不应使用。

结果

正在加载...

实时编辑器

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;