32027d24.6a79909b.js

"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[9814],{24054:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>m,frontMatter:()=>a,metadata:()=>d,toc:()=>p});var o=n(85893),s=n(11151);const i="import ThemeProvider from 'react-bootstrap/ThemeProvider';\nimport Button from 'react-bootstrap/Button';\n\nfunction PrefixesExample() {\n  return (\n    <>\n      {/* Hint: inspect the markup to see how the classes differ */}\n      <ThemeProvider prefixes={{ btn: 'my-btn' }}>\n        <Button variant=\"primary\">My Button</Button>\n      </ThemeProvider>\n      <Button bsPrefix=\"super-btn\" variant=\"primary\">\n        Super button\n      </Button>\n    </>\n  );\n}\n\nexport default PrefixesExample;\n",r='import Button from \'react-bootstrap/Button\';\n\nfunction VariantsExample() {\n  return (\n    <>\n      <style type="text/css">\n        {`\n    .btn-flat {\n      background-color: purple;\n      color: white;\n    }\n\n    .btn-xxl {\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n    }\n    `}\n      </style>\n\n      <Button variant="flat" size="xxl">\n        flat button\n      </Button>\n    </>\n  );\n}\n\nexport default VariantsExample;\n',a={title:"Theming and customizing styles",sidebar_label:"Theming",sidebar_position:3},c=void 0,d={id:"getting-started/theming",title:"Theming and customizing styles",description:"Generally, if you stick to the Bootstrap defined classes and variants,",source:"@site/docs/getting-started/theming.mdx",sourceDirName:"getting-started",slug:"/getting-started/theming",permalink:"/docs/getting-started/theming",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Theming and customizing styles",sidebar_label:"Theming",sidebar_position:3},sidebar:"sidebar",previous:{title:"Why React-Bootstrap?",permalink:"/docs/getting-started/why-react-bootstrap"},next:{title:"Color modes",permalink:"/docs/getting-started/color-modes"}},l={},p=[{value:"New variants and sizes",id:"new-variants-and-sizes",level:2},{value:"Prefixing components",id:"prefixing-components",level:2}];function u(e){const t={admonition:"admonition",code:"code",h2:"h2",p:"p",...(0,s.a)(),...e.components},{CodeBlock:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Generally, if you stick to the Bootstrap defined classes and variants,\nthere isn't anything you need to do to use a custom theme with\nReact-Bootstrap. It just works. But we also make coloring outside the\nlines easy to do."}),"\n",(0,o.jsx)(t.h2,{id:"new-variants-and-sizes",children:"New variants and sizes"}),"\n",(0,o.jsxs)(t.p,{children:["Custom variants and sizes should follow the pattern of the default\nBootstrap variants, and define css classes matching:\n",(0,o.jsx)(t.code,{children:"component-*"}),". React-Bootstrap builds the component\n",(0,o.jsx)(t.code,{children:"classNames"})," in a consistent way that you can rely on. For\ninstance this custom ",(0,o.jsx)(t.code,{children:"Button"}),"."]}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:r}),"\n",(0,o.jsx)(t.h2,{id:"prefixing-components",children:"Prefixing components"}),"\n",(0,o.jsxs)(t.p,{children:['In some cases you may need to change the base class "prefix" of one or\nmore components. You can control how a component prefixes its classes\nlocally by changing the ',(0,o.jsx)(t.code,{children:"bsPrefix"})," prop or globally via the\n",(0,o.jsx)(t.code,{children:"ThemeProvider"})," component."]}),"\n",(0,o.jsx)(t.admonition,{type:"caution",children:(0,o.jsx)(t.p,{children:"Changing prefixes is an escape hatch and generally shouldn't be used."})}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:i})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},11151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>r});var o=n(67294);const s={},i=o.createContext(s);function r(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]);