-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcomponent---src-content-styling-mdx-da763ec2f0466849a3f9.js
More file actions
2 lines (2 loc) · 52.8 KB
/
component---src-content-styling-mdx-da763ec2f0466849a3f9.js
File metadata and controls
2 lines (2 loc) · 52.8 KB
1
2
(window.webpackJsonp=window.webpackJsonp||[]).push([[18,6,9,19],{"2rWQ":function(a,s,e){"use strict";e.r(s),e.d(s,"_frontmatter",(function(){return N})),e.d(s,"default",(function(){return g}));var n,t=e("35sm"),c=e("PgR7"),b=e("blud"),p=e("bCsZ"),m=e("92XE"),j=e("d/wD"),O=e("Th6I"),N={},r=(n="Example",function(a){return console.warn("Component "+n+" was not imported, exported, or provided by MDXProvider as global scope"),Object(b.b)("div",a)}),l={_frontmatter:N},i=O.a;function g(a){var s=a.components,e=Object(t.a)(a,["components"]);return Object(b.b)(i,Object.assign({},l,e,{components:s,mdxType:"MDXLayout"}),Object(b.b)("h2",{id:"styling"},"Styling",Object(b.b)("a",Object.assign({parentName:"h2"},{href:"#styling","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"React does not have an opinion about how styles are defined; if in doubt, a\ngood starting point is to define your styles in a separate ",Object(b.b)("inlineCode",{parentName:"p"},"*.css")," file as\nusual and refer to them using ",Object(b.b)("inlineCode",{parentName:"p"},"className"),"."),Object(b.b)("p",{parentName:"blockquote"},"— ",Object(b.b)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/docs/faq-styling.html#what-is-css-in-js",target:"_blank",rel:"noreferrer"}),"React docs"))),Object(b.b)("h3",{id:"global-css"},"Global CSS",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#global-css","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("p",null,Object(b.b)("img",Object.assign({parentName:"p"},{src:"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4dFgGp8Bfoo%2Fhqdefault.jpg",alt:"the ol' reliable"}))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"just import some CSS"),Object(b.b)("li",{parentName:"ul"},"no scoping"),Object(b.b)("li",{parentName:"ul"},"have to use ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"http://getbem.com",target:"_blank",rel:"noreferrer"}),"BEM"))),Object(b.b)(r,{link:"https://codesandbox.io/s/9u83b?file=/src/example.tsx",testLink:"https://codesandbox.io/s/y38sd?file=/src/example.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"0"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, useState } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./global.css"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { Slider } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./slider"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Global"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [value, setValue] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"100"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"global__wrapper"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Slider"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{value} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onChange"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setValue} />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"global__circle"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"style"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ fontSize"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"${"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"*"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0.01"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"}"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"em`"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," awesome circle"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Global"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,j.a)),mdxType:"Example"}),Object(b.b)("h3",{id:"css-modules"},"CSS Modules",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#css-modules","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"just import some CSS"),Object(b.b)("li",{parentName:"ul"},"must be named ",Object(b.b)("inlineCode",{parentName:"li"},"*.module.css")),Object(b.b)("li",{parentName:"ul"},"classes automatically scoped, worry free naming"),Object(b.b)("li",{parentName:"ul"},"CSS bundled with component"),Object(b.b)("li",{parentName:"ul"},"short class names in production"),Object(b.b)("li",{parentName:"ul"},"less dead CSS")),Object(b.b)(r,{link:"https://codesandbox.io/s/surpq?file=/src/example.tsx",testLink:"https://codesandbox.io/s/qndql?file=/src/example.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"1"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, useState } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," classes "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./example.module.css"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { Slider } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./slider"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Module"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [value, setValue] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"100"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.wrapper}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Slider"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{value} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onChange"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setValue} />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.circle} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"style"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ fontSize"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"${"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"*"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0.01"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"}"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"em`"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," awesome circle"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Module"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,m.a)),mdxType:"Example"}),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"note that both CSS approaches have to use the ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/dom-elements.html#style",target:"_blank",rel:"noreferrer"}),Object(b.b)("inlineCode",{parentName:"a"},"style"))," prop for dynamic styles")),Object(b.b)("h3",{id:"css-in-js"},"CSS in JS",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#css-in-js","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("p",{parentName:"li"},"common pattern in React apps ",Object(b.b)("strong",{parentName:"p"},"provided by libraries"))),Object(b.b)("li",{parentName:"ul"},Object(b.b)("p",{parentName:"li"},Object(b.b)("a",Object.assign({parentName:"p"},{href:"https://styled-components.com",target:"_blank",rel:"noreferrer"}),Object(b.b)("inlineCode",{parentName:"a"},"styled-components"))," most popular"),Object(b.b)("blockquote",{parentName:"li"},Object(b.b)("ul",{parentName:"blockquote"},Object(b.b)("li",{parentName:"ul"},"Automatic critical CSS"),Object(b.b)("li",{parentName:"ul"},"No class name bugs"),Object(b.b)("li",{parentName:"ul"},"Easier deletion of CSS"),Object(b.b)("li",{parentName:"ul"},"Simple dynamic styling"),Object(b.b)("li",{parentName:"ul"},"Painless maintenance"),Object(b.b)("li",{parentName:"ul"},"Automatic vendor prefixing")))),Object(b.b)("li",{parentName:"ul"},Object(b.b)("p",{parentName:"li"},"fantastic for dynamic styling")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("p",{parentName:"li"},"component fully contained in single file")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("p",{parentName:"li"},"needs ",Object(b.b)("a",Object.assign({parentName:"p"},{href:"https://github.com/styled-components/vscode-styled-components",target:"_blank",rel:"noreferrer"}),"extension")," for syntax highlighting"))),Object(b.b)(r,{link:"https://codesandbox.io/s/2jsp3?file=/src/example.tsx",testLink:"https://codesandbox.io/s/zxmrv?file=/src/example.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"2"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, useState } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," styled "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"styled-components"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { Slider } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./slider"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Wrapper "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," styled.div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"min-height"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"250"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"px"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"min-width"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"250"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"px"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," Circle "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," styled.div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{ fontSize"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," number }"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),">"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"align-items"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"center"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"background-color"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"dodgerblue"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"border-radius"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"99999"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"px"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"color"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"aliceblue"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"display"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"flex"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"flex-direction"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"column"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"font-family"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"Arial"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"Helvetica"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"sans-serif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"font-size"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"${"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"props"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," props.fontSize"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"}"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"em;"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"height"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"10"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"em"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"justify-content"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"center"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"transition"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"all"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0.5"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"s"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"cubic-bezier"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0.68"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"-0.55"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0.265"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1.55"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),");"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"width"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"10"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"em"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),";"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"`"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Styled"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [value, setValue] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"100"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Wrapper"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Slider"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{value} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onChange"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setValue} />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Circle"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"fontSize"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{value "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"*"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"0.01"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}>awesome circle</"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Circle"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Wrapper"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Styled"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,p.a)),mdxType:"Example"}),Object(b.b)("h3",{id:"ps"},"P.S.",Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#ps","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"it doesn’t matter which approach you use, but don’t mix them")),Object(b.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 .mtk9 { color: #50FA7B; }\n .dracula .mtk3 { color: #8BE9FD; }\n .dracula .mtk5 { color: #BD93F9; }\n .dracula .mtk8 { color: #FFB86C; }\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"))}g.isMDXComponent=!0},Th6I:function(a,s,e){"use strict";var n=e("PgR7"),t=e.n(n),c=e("CxXQ"),b=e("Nhdc"),p=e("poQC"),m=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})),j=c.b.div.withConfig({displayName:"default__NavigationSlot",componentId:"cc4rlb-1"})(["grid-area:nav;"]),O=c.b.main.withConfig({displayName:"default__Content",componentId:"cc4rlb-2"})(["grid-area:content;"]),N=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})),r=Object(c.b)(b.Prev).withConfig({displayName:"default__StyledPrev",componentId:"cc4rlb-4"})(["grid-area:prev;"]),l=Object(c.b)(b.Next).withConfig({displayName:"default__StyledNext",componentId:"cc4rlb-5"})(["grid-area:next;justify-self:flex-end;"]);s.a=function(a){var s=a.children,e=Object(b.useSlug)(),n=Object(p.a)(e);return t.a.createElement(t.a.Fragment,null,t.a.createElement(b.SEO,{title:n}),t.a.createElement(b.DefaultThemeProvider,null,t.a.createElement(m,null,t.a.createElement(j,null,t.a.createElement(b.Navigation,null)),t.a.createElement(O,null,t.a.createElement("article",null,t.a.createElement(b.DefaultMDXProvider,null,s)),t.a.createElement(N,null,t.a.createElement(r,null),t.a.createElement(l,null)),t.a.createElement(b.Footer,null)))))}}}]);
//# sourceMappingURL=component---src-content-styling-mdx-da763ec2f0466849a3f9.js.map