スタイルのテーマ化とカスタマイズ

一般的には、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;

コンポーネントのプレフィックス

場合によっては、1 つ以上のコンポーネントのベースクラス「プレフィックス」を変更する必要がある場合があります。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;