kylefang/react-native-paper
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-paper.git synced 2026-06-17 04:09:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
884a19036658d2edad523d5cfd1c4e000f604cda
react-native-paper/theming.html
Circle CI 5026d7dcc5 Deploy to GitHub Pages: 6cc83d2be2
2018-09-03 11:22:55 +00:00

107 lines
25 KiB
HTML
Raw Blame History

<html lang="en" data-reactroot=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content=""/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Theming"/><meta name="twitter:description" content=""/><meta property="og:type" content="website"/><meta property="og:title" content="Theming"/><meta property="og:description" content=""/><title>Theming</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="_wrapper__1nbmuhq" data-reactroot=""><aside class="_sidebar__1gt5k1p"><input type="checkbox" class="_menuButton__1gt5k1p" id="slide-sidebar" role="button"/><label class="_menuIcon__1gt5k1p" for="slide-sidebar">☰</label><div class="_menu__1gt5k1p"><input type="search" value="" placeholder="Filter…" class="_searchbar__1gt5k1p"/><nav class="_navigation__1gt5k1p"><a class="_link__1gt5k1p" href="index.html">Home</a><a class="_link__1gt5k1p" href="showcase.html">Showcase</a><a class="_link__1gt5k1p" href="getting-started.html">Getting Started</a><a class="_link__1gt5k1p _active__1gt5k1p" href="theming.html">Theming</a><a class="_link__1gt5k1p" href="icons.html">Icons</a><a class="_link__1gt5k1p" href="contributing.html">Contributing</a><hr class="_separator__1gt5k1p"/><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="appbar.html">Appbar</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="appbar-action.html">Appbar.Action</a><a class="_link__1gt5k1p" href="appbar-back-action.html">Appbar.BackAction</a><a class="_link__1gt5k1p" href="appbar-content.html">Appbar.Content</a><a class="_link__1gt5k1p" href="appbar-header.html">Appbar.Header</a></div></div><a class="_link__1gt5k1p" href="bottom-navigation.html">BottomNavigation</a><a class="_link__1gt5k1p" href="button.html">Button</a><a class="_link__1gt5k1p" href="caption.html">Caption</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="card.html">Card</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="card-actions.html">Card.Actions</a><a class="_link__1gt5k1p" href="card-content.html">Card.Content</a><a class="_link__1gt5k1p" href="card-cover.html">Card.Cover</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox.html">Checkbox</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox-android.html">Checkbox.Android</a><a class="_link__1gt5k1p" href="checkbox-ios.html">Checkbox.IOS</a></div></div><a class="_link__1gt5k1p" href="chip.html">Chip</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="dialog.html">Dialog</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="dialog-actions.html">Dialog.Actions</a><a class="_link__1gt5k1p" href="dialog-content.html">Dialog.Content</a><a class="_link__1gt5k1p" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a class="_link__1gt5k1p" href="dialog-title.html">Dialog.Title</a></div></div><a class="_link__1gt5k1p" href="divider.html">Divider</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">Drawer</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="drawer-item.html">Drawer.Item</a><a class="_link__1gt5k1p" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="fab.html">FAB</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="fab-group.html">FAB.Group</a></div></div><a class="_link__1gt5k1p" href="headline.html">Headline</a><a class="_link__1gt5k1p" href="helper-text.html">HelperText</a><a class="_link__1gt5k1p" href="icon-button.html">IconButton</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">List</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="list-accordion.html">List.Accordion</a><a class="_link__1gt5k1p" href="list-icon.html">List.Icon</a><a class="_link__1gt5k1p" href="list-item.html">List.Item</a><a class="_link__1gt5k1p" href="list-section.html">List.Section</a></div></div><a class="_link__1gt5k1p" href="modal.html">Modal</a><a class="_link__1gt5k1p" href="paragraph.html">Paragraph</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="portal.html">Portal</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="portal-host.html">Portal.Host</a></div></div><a class="_link__1gt5k1p" href="progress-bar.html">ProgressBar</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button.html">RadioButton</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button-android.html">RadioButton.Android</a><a class="_link__1gt5k1p" href="radio-button-group.html">RadioButton.Group</a><a class="_link__1gt5k1p" href="radio-button-ios.html">RadioButton.IOS</a></div></div><a class="_link__1gt5k1p" href="searchbar.html">Searchbar</a><a class="_link__1gt5k1p" href="snackbar.html">Snackbar</a><a class="_link__1gt5k1p" href="subheading.html">Subheading</a><a class="_link__1gt5k1p" href="surface.html">Surface</a><a class="_link__1gt5k1p" href="switch.html">Switch</a><a class="_link__1gt5k1p" href="text.html">Text</a><a class="_link__1gt5k1p" href="text-input.html">TextInput</a><a class="_link__1gt5k1p" href="title.html">Title</a><a class="_link__1gt5k1p" href="touchable-ripple.html">TouchableRipple</a></nav></div></aside><div class="_container__z02bld"><main class="_content__z02bld"><div class="_markdown__1e8xr4b"><h2>Applying a theme to the whole app</h2>
<p>To support custom themes, paper exports a <code>Provider</code> component. You need to wrap your root component with the provider to be able to support themes.</p>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Provider <span class="token keyword keyword-as" >as</span> PaperProvider <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> App <span class="token keyword keyword-from" >from</span> <span class="token string" >'./src/App'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Main</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>PaperProvider</span><span class="token punctuation" >&gt;</span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>App</span> <span class="token punctuation" >/&gt;</span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>PaperProvider</span><span class="token punctuation" >&gt;</span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>If no prop is specified, this will apply the <a href="https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.js">default theme</a> to the components. You can also provide a <code>theme</code> prop with a theme object with same properties as the default theme:</p>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> DefaultTheme<span class="token punctuation" >,</span> Provider <span class="token keyword keyword-as" >as</span> PaperProvider <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> App <span class="token keyword keyword-from" >from</span> <span class="token string" >'./src/App'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> theme <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>DefaultTheme<span class="token punctuation" >,</span>
roundness<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span>
colors<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>DefaultTheme<span class="token punctuation" >.</span>colors<span class="token punctuation" >,</span>
primary<span class="token punctuation" >:</span> <span class="token string" >'#3498db'</span><span class="token punctuation" >,</span>
accent<span class="token punctuation" >:</span> <span class="token string" >'#f1c40f'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Main</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>PaperProvider</span> <span class="token attr-name" >theme</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>theme<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >&gt;</span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>App</span> <span class="token punctuation" >/&gt;</span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>PaperProvider</span><span class="token punctuation" >&gt;</span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can change the theme prop dynamically and all the components will automatically update to reflect the new theme.</p>
<p>A theme usually contains the following properties:</p>
<ul>
<li><code>dark</code> (<code>boolean</code>): whether this is a dark theme or light theme.</li>
<li><code>roundness</code> (<code>number</code>): roundness of common elements, such as buttons.</li>
<li><code>colors</code> (<code>object</code>): various colors used throught different elements.
<ul>
<li><code>primary</code> - primary color for your app, usually your brand color.</li>
<li><code>accent</code> - secondary color for your app which complements the primary color.</li>
<li><code>background</code> - background color for pages, such as lists.</li>
<li><code>surface</code> - background color for elements containing content, such as cards.</li>
<li><code>text</code> - text color for content.</li>
<li><code>disabled</code> - color for disabled elements.</li>
<li><code>placeholder</code> - color for placeholder text, such as input placeholder.</li>
<li><code>backdrop</code> - color for backdrops of various components such as modals.</li>
</ul></li>
<li><code>fonts</code> (<code>object</code>): various fonts used throught different elements.
<ul>
<li><code>regular</code></li>
<li><code>medium</code></li>
<li><code>light</code></li>
<li><code>thin</code></li>
</ul></li>
</ul>
<p>When creating a custom theme, you will need to provide all of these properties.</p>
<h2>Applying a theme to a paper component</h2>
<p>If you want to change the theme for a certain component from the library, you can directly pass the <code>theme</code> prop to the component. The theme passed as the prop is merged with the theme from the <code>Provider</code>.</p>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Button <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >ButtonExample</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Button</span> <span class="token attr-name" >raised</span> <span class="token attr-name" >theme</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> roundness<span class="token punctuation" >:</span> <span class="token number" >3</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >&gt;</span></span>
Press me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Button</span><span class="token punctuation" >&gt;</span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h2>Using the theme in your own components</h2>
<p>To access the theme in your own components, you can use the <code>withTheme</code> HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop.</p>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> withTheme <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >MyComponent</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> colors <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> props<span class="token punctuation" >.</span>theme<span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Text</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> color<span class="token punctuation" >:</span> colors<span class="token punctuation" >.</span>primary <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >&gt;</span></span>Yo<span class="token operator" >!</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Text</span><span class="token punctuation" >&gt;</span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token function" >withTheme</span><span class="token punctuation brackets-parentheses" >(</span>MyComponent<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Components wrapped with <code>withTheme</code> support the theme from the <code>Provider</code> as well as from the <code>theme</code> prop.</p>
<h2>Customizing all instances of a component</h2>
<p>Sometimes you want to style a component in a different way everywhere and don't want to change the properties in the theme so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change <code>theme.fonts.medium</code> because it affects other components.</p>
<p>We don't have an API to do this, because you can already do it with components:</p>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Button <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >FancyButton</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Button</span> <span class="token attr-name" >theme</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> fonts<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> medium<span class="token punctuation" >:</span> <span class="token string" >'Open Sans'</span> <span class="token punctuation brackets-braces" >}</span> <span class="token punctuation brackets-braces" >}</span></span><span class="token attr-name" >}</span> <span class="token attr-name" >{...props}</span> <span class="token punctuation" >/&gt;</span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Now you can use your <code>FancyButton</code> component everywhere instead of using <code>Button</code> from Paper.</p>
<h2>Gotchas</h2>
<p>The <code>Provider</code> exposes the theme to the components via <a href="https://reactjs.org/docs/context.html">React's context API</a>, which means that the component must be in the same tree as the <code>Provider</code>. Some React Native components will render a different tree such as a <code>Modal</code>, in which case the components inside the <code>Modal</code> won't be able to access the theme. The work around is to get the theme using the <code>withTheme</code> HOC and pass it down to the components as props, or expose it again with the exported <code>ThemeProvider</code> component.</p>
<p>The <code>Modal</code> component from the library already handles this edge case, so you won't need to do anything.</p>
</div></main></div></div></div>
<script>
window.__INITIAL_PATH__ = 'theming';
</script>
<script src="app.bundle.js"></script><script src="scripts/snack.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink