-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcomponent---src-content-higher-order-components-mdx-fe435e7a3e2bd8b54898.js
More file actions
2 lines (2 loc) · 61.7 KB
/
component---src-content-higher-order-components-mdx-fe435e7a3e2bd8b54898.js
File metadata and controls
2 lines (2 loc) · 61.7 KB
1
2
(window.webpackJsonp=window.webpackJsonp||[]).push([[14,6,9,19],{FVKN:function(a,e,s){"use strict";s.r(e),s.d(e,"_frontmatter",(function(){return p})),s.d(e,"default",(function(){return l}));var n=s("35sm"),t=s("PgR7"),c=s("blud"),b=s("cokd"),m=s("Th6I"),p={},r=function(a){return function(e){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),Object(c.b)("div",e)}},j=r("Link"),O=r("Example"),N={_frontmatter:p},i=m.a;function l(a){var e=a.components,s=Object(n.a)(a,["components"]);return Object(c.b)(i,Object.assign({},N,s,{components:e,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"higher-order-components"},"Higher Order Components",Object(c.b)("a",Object.assign({parentName:"h2"},{href:"#higher-order-components","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("h3",{id:"higher-order-functions"},"Higher Order Functions",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#higher-order-functions","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"A higher-order function is a function that does at least one of the following:"),Object(c.b)("ul",{parentName:"blockquote"},Object(c.b)("li",{parentName:"ul"},"takes one or more functions as arguments"),Object(c.b)("li",{parentName:"ul"},"returns a function as its result")),Object(c.b)("p",{parentName:"blockquote"},"— ",Object(c.b)("a",Object.assign({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Higher-order_function",target:"_blank",rel:"noreferrer"}),"Wikipedia"))),Object(c.b)("h3",{id:"what"},"What?",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#what","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"A higher-order component is a function that takes a component and returns a new component."),Object(c.b)("p",{parentName:"blockquote"},"— ",Object(c.b)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/docs/higher-order-components.html",target:"_blank",rel:"noreferrer"}),"React docs"))),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)("code",Object.assign({parentName:"li"},{className:"inline dracula","data-language":"ts","data-index":"0"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"ComponentWithFeature"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk9"}),"withFeature"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"InternalComponent"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),")"))),Object(c.b)("li",{parentName:"ul"},"usually for injecting props in the wrapped component")),Object(c.b)("h3",{id:"why"},"Why?",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#why","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://en.wikipedia.org/wiki/Cross-cutting_concern",target:"_blank",rel:"noreferrer"}),"code sharing")," for class components (and ",Object(c.b)("inlineCode",{parentName:"li"},"FC"),"s)"),Object(c.b)("li",{parentName:"ul"},Object(c.b)("inlineCode",{parentName:"li"},"FC"),"s should always use ",Object(c.b)(j,Object.assign({parentName:"li"},{to:"/custom-hooks"},{mdxType:"Link"}),"hooks")),Object(c.b)("li",{parentName:"ul"},"HOCs can be ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/higher-order-components.html#convention-maximizing-composability",target:"_blank",rel:"noreferrer"}),"composed"))),Object(c.b)("h3",{id:"withtheme"},Object(c.b)("inlineCode",{parentName:"h3"},"withTheme"),Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#withtheme","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)("inlineCode",{parentName:"li"},"withTheme")," is a HOC that encapsulates ",Object(c.b)("inlineCode",{parentName:"li"},"ThemeContext")),Object(c.b)("li",{parentName:"ul"},"note the ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"displayName")," convention"))),Object(c.b)(O,{link:"https://codesandbox.io/s/be3z1?file=/src/theme-library/with-theme.tsx",testLink:"https://codesandbox.io/s/9gj5o?file=/src/theme-library/with-theme.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"0"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { Component, ComponentType, ReactNode } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { ThemeContext, ThemeContextType } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./internal/theme-context"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"PropsWithTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemeContextType"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"PropsWithoutTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Omit"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"T"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"withTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"TProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"PropsWithTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"WrappedComponent"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ComponentType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"TProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ComponentType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"PropsWithoutTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"TProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"WithThemeComponentProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"PropsWithoutTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"TProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"class"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"WithThemeComponent"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Component"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"WithThemeComponentProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"static"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," displayName "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`withTheme("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"${"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"WrappedComponent.displayName"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"||"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"WrappedComponent.name"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"||"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Component"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"}"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),")`"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"private"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"themeContextConsumer"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemeContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," props "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".props, theme } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"as"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"TProps"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"WrappedComponent"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"props} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"render"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemeContext.Consumer"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".themeContextConsumer}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemeContext.Consumer"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}")))))),mdxType:"Example"}),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"injected ",Object(c.b)("inlineCode",{parentName:"li"},"theme")," prop can be used outside of render (cf. ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/context.html#contextconsumer",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"Context.Consumer")),")")),Object(c.b)(O,{link:"https://codesandbox.io/s/be3z1?file=/src/example.tsx",testLink:"https://codesandbox.io/s/9gj5o?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"1"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { Component, FC, ReactNode } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," DarkTheme,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," LightTheme,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," PropsWithTheme,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," withTheme,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./theme-library"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InternalThemedParagraphProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"PropsWithTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"class"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"InternalThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Component"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"InternalThemedParagraphProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"componentDidMount"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// eslint-disable-next-line no-console"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"console"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"log"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".props.theme)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"render"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"color"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { foreground },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," children,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5 mtki"}),"this"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),".props"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"style"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ color"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," foreground }}>{children}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ThemedParagraph "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"withTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(InternalThemedParagraph)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"InternalThemedCardProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"extends"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"PropsWithTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ReactNode"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"InternalThemedCard"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"InternalThemedCardProps"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," color"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { background },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," children,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"style"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ backgroundColor"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," background }}>{children}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ThemedCard "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"withTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(InternalThemedCard)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"DarkTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedCard"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ipsum"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," sapiente ut pariatur. Aliquam suscipit consequuntur similique repellat"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," praesentium eos odit. Ad ipsum voluptatibus natus dignissimos rerum."))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Laborum, molestias temporibus?"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ipsum"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," sapiente ut pariatur. Aliquam suscipit consequuntur similique repellat"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," praesentium eos odit. Ad ipsum voluptatibus natus dignissimos rerum."))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Laborum, molestias temporibus?"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedCard"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"DarkTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"LightTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedCard"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ipsum"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," sapiente ut pariatur. Aliquam suscipit consequuntur similique repellat"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," praesentium eos odit. Ad ipsum voluptatibus natus dignissimos rerum."))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Laborum, molestias temporibus?"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ipsum"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," sapiente ut pariatur. Aliquam suscipit consequuntur similique repellat"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," praesentium eos odit. Ad ipsum voluptatibus natus dignissimos rerum."))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Laborum, molestias temporibus?"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedParagraph"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ThemedCard"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"LightTheme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,b.a)),mdxType:"Example"}),Object(c.b)("style",{className:"grvsc-styles"},"\n \n .dracula {\n color: #F8F8F2;\n background-color: #282A36;\n }\n .dracula .mtki { font-style: italic; }\n .dracula .mtk6 { color: #FF79C6; }\n .dracula .mtk1 { color: #F8F8F2; }\n .dracula .mtk11 { color: #E9F284; }\n .dracula .mtk7 { color: #F1FA8C; }\n .dracula .mtk3 { color: #8BE9FD; }\n .dracula .mtk8 { color: #FFB86C; }\n .dracula .mtk9 { color: #50FA7B; }\n .dracula .mtk5 { color: #BD93F9; }\n .dracula .mtk4 { color: #6272A4; }\n .dracula .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n"))}l.isMDXComponent=!0},Th6I:function(a,e,s){"use strict";var n=s("PgR7"),t=s.n(n),c=s("CxXQ"),b=s("Nhdc"),m=s("poQC"),p=c.b.div.withConfig({displayName:"default__Grid",componentId:"cc4rlb-0"})(["display:grid;grid-template-areas:'left-void nav right-void' 'left-void content right-void';grid-template-columns:1fr minmax(0,85ch) 1fr;padding:0 0.5rem;@media (min-width:","){grid-template-areas:'nav content void';grid-template-columns:1fr 85ch 1fr;padding:1rem;max-width:150ch;margin:0 auto;}"],(function(a){return a.theme.breakpoints.xl})),r=c.b.div.withConfig({displayName:"default__NavigationSlot",componentId:"cc4rlb-1"})(["grid-area:nav;"]),j=c.b.main.withConfig({displayName:"default__Content",componentId:"cc4rlb-2"})(["grid-area:content;"]),O=c.b.div.withConfig({displayName:"default__Paging",componentId:"cc4rlb-3"})(["display:grid;grid-template-areas:'next' 'prev';@media (min-width:","){grid-template-areas:'prev void next';grid-template-columns:auto 1fr auto;}"],(function(a){return a.theme.breakpoints.sm})),N=Object(c.b)(b.Prev).withConfig({displayName:"default__StyledPrev",componentId:"cc4rlb-4"})(["grid-area:prev;"]),i=Object(c.b)(b.Next).withConfig({displayName:"default__StyledNext",componentId:"cc4rlb-5"})(["grid-area:next;justify-self:flex-end;"]);e.a=function(a){var e=a.children,s=Object(b.useSlug)(),n=Object(m.a)(s);return t.a.createElement(t.a.Fragment,null,t.a.createElement(b.SEO,{title:n}),t.a.createElement(b.DefaultThemeProvider,null,t.a.createElement(p,null,t.a.createElement(r,null,t.a.createElement(b.Navigation,null)),t.a.createElement(j,null,t.a.createElement("article",null,t.a.createElement(b.DefaultMDXProvider,null,e)),t.a.createElement(O,null,t.a.createElement(N,null),t.a.createElement(i,null)),t.a.createElement(b.Footer,null)))))}}}]);
//# sourceMappingURL=component---src-content-higher-order-components-mdx-fe435e7a3e2bd8b54898.js.map