PageSourceSearch

https://emotion.netlify.app/docs/@emotion/css

html emotion.netlify.app collected 2026-10-03 10:41:54 UTC 159,363 bytes, 307 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="shortcut icon" href="/logo-32x32.png"/><title>Emotion – @emotion/css</title><meta name="next-head-count" content="4"/><link rel="preload" href="/_next/static/css/dea416c43ccbe211.css" as="style"/><link rel="stylesheet" href="/_next/static/css/dea416c43ccbe211.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-0d1b80a048d4787e.js"></script>
1<script src="/_next/static/chunks/webpack-484b48eac243bc2b.js" defer=""></script>
1<script src="/_next/static/chunks/framework-9e8a250e8ae37f51.js" defer=""></script>
1<script src="/_next/static/chunks/main-e80a1237507afdfe.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-5361c1ac6d415004.js" defer=""></script>
1<script src="/_next/static/chunks/174-f5213230cebea48a.js" defer=""></script>
1<script src="/_next/static/chunks/464-30a57c36050abb7f.js" defer=""></script>
1<script src="/_next/static/chunks/pages/docs/@emotion/%5BpackageName%5D-b839ad3b0232db87.js" defer=""></script>
1<script src="/_next/static/S-1L7vLJVVMbIYWtqiwHZ/_buildManifest.js" defer=""></script>
1<script src="/_next/static/S-1L7vLJVVMbIYWtqiwHZ/_ssgManifest.js" defer=""></script>
1</head><body><div id="__next" data-reactroot=""><style data-emotion="css-global 1x8e6ln">pre::-webkit-scrollbar{width:14px;}pre::-webkit-scrollbar-track{background-color:#6272a4;border-radius:0px;}pre::-webkit-scrollbar-thumb{background-color:#bd93f9;border-radius:0px;}code[class*="language-"],pre[class*="language-"],[language="jsx"] pre{color:#ccc;background:rgb(40, 41, 54);text-shadow:none;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}}pre[class*="language-"]{background:rgba(40, 41, 54, 1)!important;border-radius:0.5em;padding:1em;margin:0.5em 0;overflow:auto;height:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:rgba(40, 41, 54, 1);}:not(pre)>code[class*="language-"]{padding:4px 7px;border-radius:0.3em;white-space:normal;}.limit-300{height:300px!important;}.limit-400{height:400px!important;}.limit-500{height:500px!important;}.limit-600{height:600px!important;}.limit-700{height:700px!important;}.limit-800{height:800px!important;}.token.plain{color:#ccc;}.token.comment{color:rgba(98, 114, 164, 1);}.token.prolog{color:rgba(207, 207, 194, 1);}.token.tag{color:rgba(220, 104, 170, 1);}.token.entity{color:rgba(139, 233, 253, 1);}.token.atrule{color:rgba(98, 239, 117, 1);}.token.url{color:rgba(102, 217, 239, 1);}.token.selector{color:rgba(207, 207, 194, 1);}.token.string{color:rgba(241, 250, 140, 1);}.token.property{color:rgba(255, 184, 108, 1);}.token.important{color:rgba(255, 121, 198, 1);font-weight:bold;}.token.punctuation{color:rgba(230, 219, 116, 1);}.token.number{color:rgba(189, 147, 249, 1);}.token.function{color:rgba(80, 250, 123, 1);}.token.class-name{color:rgba(255, 184, 108, 1);}.token.keyword{color:rgba(255, 121, 198, 1);}.token.boolean{color:rgba(255, 184, 108, 1);}.token.operator{color:rgba(139, 233, 253, 1);}.token.char{color:rgba(255, 135, 157, 1);}.token.regex{color:rgba(80, 250, 123, 1);}.token.variable{color:rgba(80, 250, 123, 1);}.token.constant{color:rgba(255, 184, 108, 1);}.token.symbol{color:rgba(255, 184, 108, 1);}.token.builtin{color:rgba(255, 121, 198, 1);}.token.attr-value{color:#7ec699;}.token.inserted{color:rgba(80, 250, 123, 1);}.token.deleted{color:#e2777a;}.token.namespace{color:#e2777a;}.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token{color:#ff79c6;}.language-json .token.property{color:#ff79c6;}.language-css .token.selector{color:rgba(80, 250, 123, 1);}.language-css .token.property{color:rgba(255, 184, 108, 1);}.language-markup .token.attr-value{color:rgba(102, 217, 239, 1);}.language-markup .token.tag{color:rgba(80, 250, 123, 1);}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;}pre.line-numbers>code{position:relative;white-space:inherit;}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber;}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;}div.code-toolbar{position:relative;}div.code-toolbar>.toolbar{position:absolute;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0;}div.code-toolbar:hover>.toolbar{opacity:1;}div.code-toolbar>.toolbar .toolbar-item{display:inline-block;padding-right:20px;}div.code-toolbar>.toolbar a{cursor:pointer;}div.code-toolbar>.toolbar button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}div.code-toolbar>.toolbar a,div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{color:#ccc;font-size:0.8em;padding:0.5em;background:rgba(98, 114, 164, 1);border-radius:0.5em;}div.code-toolbar>.toolbar a:hover,div.code-toolbar>.toolbar a:focus,div.code-toolbar>.toolbar button:hover,div.code-toolbar>.toolbar button:focus,div.code-toolbar>.toolbar span:hover,div.code-toolbar>.toolbar span:focus{color:inherit;-webkit-text-decoration:none;text-decoration:none;background-color:var(--verde);}a{color:#D26AC2;-webkit-text-decoration:none;text-decoration:none;}a:hover{color:#C43BAD;-webkit-text-decoration:underline;text-decoration:underline;}</style><style data-emotion="css gb8pey">.css-gb8pey{-webkit-text-decoration:none;text-decoration:none;}.css-gb8pey:hover{-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://supportukrainenow.org" class="css-gb8pey"><style data-emotion="css t13dtp">.css-t13dtp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;
1-webkit-justify-content:center;justify-content:center;background-color:black;}</style><div class="css-t13dtp"><style data-emotion="css 194wjke">.css-194wjke{font-weight:bold;color:#fff;font-size:20px;}@media (min-width: 768px){.css-194wjke{font-size:28px;}}</style><span class="css-194wjke">🇺🇦 STOP WAR IN UKRAINE 🇺🇦</span></div></a><style data-emotion="css fu5c8j">.css-fu5c8j{background-color:#f8f9fa;border-bottom:1px solid #d2d2d2;box-shadow:0 .125rem .25rem rgba(0, 0, 0, .075);padding-top:0.25rem;margin-bottom:1.5rem;}@media (min-width: 768px){.css-fu5c8j{margin-bottom:2.5rem;}}</style><header class="css-fu5c8j"><style data-emotion="css s5xdrg">.css-s5xdrg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><style data-emotion="css b247zp">.css-b247zp{margin:0 auto;max-width:1132px;padding-left:1rem;padding-right:1rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width: 768px){.css-b247zp{padding-left:1.5rem;padding-right:1.5rem;}}</style><div class="css-b247zp"><style data-emotion="css 1g2t11v">.css-1g2t11v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;margin-right:1rem;color:#D26AC2;}.css-1g2t11v:hover{-webkit-text-decoration:none;text-decoration:none;color:#C43BAD;}</style><a href="/" class="css-1g2t11v"><img alt="Avatar" src="/logo-48x48.png" srcSet="/logo-96x96.png 2x" height="48" width="48"/><style data-emotion="css t5rx1q">.css-t5rx1q{display:none;}@media (min-width: 768px){.css-t5rx1q{display:inline;margin:0;margin-left:1.5rem;font-weight:bold;}}</style><h3 class="css-t5rx1q">Emotion</h3></a><style data-emotion="css ehb7yq">.css-ehb7yq{margin-left:auto;overflow-x:auto;padding:0.25rem 0;}</style><nav class="css-ehb7yq"><style data-emotion="css 1yi9djb">.css-1yi9djb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;gap:1.5rem;padding:0;margin:0;list-style:none;}</style><ul class="css-1yi9djb"><li><style data-emotion="css 1wmbmo">.css-1wmbmo{display:inline-block;white-space:nowrap;font-weight:500;line-height:1.3;color:#212529;-webkit-text-decoration:none;text-decoration:none;}.css-1wmbmo:hover{-webkit-text-decoration:none;text-decoration:none;}.css-1wmbmo::after{content:"";display:block;width:100%;margin-top:2px;height:3px;-webkit-transition:-webkit-transform 250ms ease;transition:transform 250ms ease;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);background-color:#C43BAD;}.css-1wmbmo.active::after,.css-1wmbmo:hover::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}</style><a class="active css-1wmbmo" href="/docs">Docs</a></li><li><a class="css-1wmbmo" href="/docs/community">Community</a></li><li><a class="css-1wmbmo" href="https://github.com/emotion-js/emotion">GitHub</a></li><li><a class="css-1wmbmo" href="https://join.slack.com/t/emotion-slack/shared_invite/zt-rmtwsy74-2uvyFdz5uxa8OiMguJJeuQ">Slack</a></li><li><a class="css-1wmbmo" href="https://5faaafd0bd0f3f0008469537--emotion.netlify.app">v10 Docs</a></li></ul></nav></div></header><style data-emotion="css o0x664">.css-o0x664{padding-bottom:2rem;}</style><style data-emotion="css 1b66821">.css-1b66821{margin:0 auto;max-width:1132px;padding-left:1rem;padding-right:1rem;padding-bottom:2rem;}@media (min-width: 768px){.css-1b66821{padding-left:1.5rem;padding-right:1.5rem;}}</style><div class="css-1b66821"><style data-emotion="css zjik7">.css-zjik7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-zjik7"><style data-emotion="css 15kbdna">.css-15kbdna{display:block;max-width:100%;}
1.css-15kbdna h2,.css-15kbdna h3,.css-15kbdna h4{margin-top:2rem;margin-bottom:1rem;}.css-15kbdna h2{padding-bottom:0.5rem;border-bottom:1px solid #eac3e4;}.css-15kbdna p,.css-15kbdna li,.css-15kbdna code{line-height:1.7;}.css-15kbdna a{font-weight:500;color:#C43BAD;}.css-15kbdna .icon-link{display:none;float:left;padding-right:0.5rem;margin-left:-1.75rem;line-height:1;width:1.75rem;height:1.25rem;background-image:url(/link.svg);-webkit-background-size:1.25rem;background-size:1.25rem;background-repeat:no-repeat;}.css-15kbdna h2 .icon-link{margin-top:0.75rem;}.css-15kbdna h3 .icon-link{margin-top:0.5rem;}.css-15kbdna h4 .icon-link{margin-top:0.4rem;}.css-15kbdna h2:hover .icon-link,.css-15kbdna h3:hover .icon-link,.css-15kbdna h4:hover .icon-link{display:block;}.css-15kbdna hr{border:1px solid #eac3e4;opacity:1;}.css-15kbdna code:not([class*="language-"]){color:#212529;background-color:rgba(117, 63, 131, 0.07);border-radius:0.25rem;padding:0.25rem;}.css-15kbdna .remark-highlight,.css-15kbdna .emotion-live-editor{margin:1.5rem 0;}.css-15kbdna blockquote{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1.5rem 0;border-left:5px solid #c865b9;background-color:#FBF8FD;padding:1rem;}.css-15kbdna blockquote p{margin:0;}.css-15kbdna blockquote p:first-of-type{font-weight:700;}.css-15kbdna blockquote p:nth-of-type(2){margin-left:0.5rem;padding:0 1rem;}.css-15kbdna .table-responsive-sm{overflow-x:auto;}@media (min-width: 768px){.css-15kbdna .table-responsive-sm{overflow-x:initial;}}.css-15kbdna table{margin:1.5rem 0;width:100%;}.css-15kbdna td,.css-15kbdna th{padding:0.75rem;border:1px solid #d2d2d2;}.css-15kbdna img{max-width:100%;}@media (min-width: 768px){.css-15kbdna{display:block;-webkit-flex:1;-ms-flex:1;flex:1;}}</style><main class="css-15kbdna"><style data-emotion="css 8r8ifa">.css-8r8ifa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1rem;}</style><div class="css-8r8ifa"><style data-emotion="css 1ykowef">.css-1ykowef{margin-bottom:0;}</style><style data-emotion="css lfunke">.css-lfunke{margin-bottom:1rem;font-weight:700;margin-bottom:0;}</style><h1 class="css-lfunke">@emotion/css</h1><style data-emotion="css uudxwr">.css-uudxwr{display:none;}@media (min-width: 768px){.css-uudxwr{display:block;font-size:0.875rem;font-weight:normal!important;}}</style><a href="https://github.com/emotion-js/emotion/edit/main/packages/css/README.md" class="css-uudxwr">✏️ <style data-emotion="css 1y2mh23">.css-1y2mh23{margin-left:0.25rem;}</style><span class="css-1y2mh23">Edit this page</span></a></div><p>The <a href="https://www.npmjs.com/package/@emotion/css">@emotion/css</a> package is framework agnostic and the simplest way to use Emotion.</p>
2<h2 id="table-of-contents"><a aria-hidden="true" tabindex="-1" href="#table-of-contents"><span class="icon icon-link"></span></a>Table of Contents</h2>
3<ul>
4<li><a href="#quick-start">Quick Start</a></li>
5<li><a href="#api">API</a>
6<ul>
7<li><a href="#css">Generate Class Names — <code>css</code></a></li>
8<li><a href="#global-styles">Global Styles — <code>injectGlobal</code></a></li>
9<li><a href="#animation-keyframes">Animation Keyframes — <code>keyframes</code></a></li>
10<li><a href="#cx">Composing Class Names — <code>cx</code></a></li>
11</ul>
12</li>
13<li><a href="#custom-instances">Custom Instances</a></li>
14<li><a href="/docs/ssr#api">Server Side Rendering</a></li>
15<li><a href="/docs/@emotion/babel-plugin">Babel Plugin</a></li>
16</ul>
17<h2 id="quick-start"><a aria-hidden="true" tabindex="-1" href="#quick-start"><span class="icon icon-link"></span></a>Quick Start</h2>
18<p>Get up and running with a single import.</p>
19<div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save @emotion/css
20</code></pre></div>
21<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword module">
21import</span> <span class="token imports"><span class="token punctuation">{</span> css <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
22
23<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">&#x27;root&#x27;</span><span class="token punctuation">)</span>
24<span class="token keyword">const</span> myStyle <span class="token operator">=</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
25  <span class="token property">color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span>
26</span><span class="token template-punctuation string">`</span></span>
27app<span class="token punctuation">.</span><span class="token property-access">classList</span><span class="token punctuation">.</span><span class="token method function property-access">add</span><span class="token punctuation">(</span>myStyle<span class="token punctuation">)</span>
28</code></pre></div>
29<h2 id="api"><a aria-hidden="true" tabindex="-1" href="#api"><span class="icon icon-link"></span></a>API</h2>
30<h3 id="css"><a aria-hidden="true" tabindex="-1" href="#css"><span class="icon icon-link"></span></a>css</h3>
31<p>The <code>css</code> function accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.</p>
32<h4 id="string-styles"><a aria-hidden="true" tabindex="-1" href="#string-styles"><span class="icon icon-link"></span></a>String Styles</h4>
33<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// @live</span>
34<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> css <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
35
36<span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">&#x27;darkgreen&#x27;</span>
37
38<span class="token function">render</span><span class="token punctuation">(</span>
39  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
40    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
41      <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">hotpink</span><span class="token punctuation">;</span>
42      <span class="token selector">&amp;<span class="token pseudo-class">:hover</span></span> <span class="token punctuation">{</span>
43        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token punctuation">;</span>
44      <span class="token punctuation">}</span>
45    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
46  <span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>
47<span class="token plain-text">    This has a hotpink background.</span>
48<span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
49<span class="token punctuation">)</span>
50</code></pre></div>
51<h4 id="object-styles"><a aria-hidden="true" tabindex="-1" href="#object-styles"><span class="icon icon-link"></span></a>Object Styles</h4>
52<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// @live</span>
53<span class="token keyword module">
53import</span> <span class="token imports"><span class="token punctuation">{</span> css <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
54
55<span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">&#x27;darkgreen&#x27;</span>
56
57<span class="token function">render</span><span class="token punctuation">(</span>
58  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
59    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
60      backgroundColor<span class="token operator">:</span> <span class="token string">&#x27;hotpink&#x27;</span><span class="token punctuation">,</span>
61      <span class="token string">&#x27;&amp;:hover&#x27;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
62        color
63      <span class="token punctuation">}</span>
64    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
65  <span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>
66<span class="token plain-text">    This has a hotpink background.</span>
67<span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
68<span class="token punctuation">)</span>
69</code></pre></div>
70<h4 id="array-of-object-styles"><a aria-hidden="true" tabindex="-1" href="#array-of-object-styles"><span class="icon icon-link"></span></a>Array of Object Styles</h4>
71<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// @live</span>
72<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> css <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
73
74<span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">&#x27;darkgreen&#x27;</span>
75<span class="token keyword">const</span> isDanger <span class="token operator">=</span> <span class="token boolean">true</span>
76
77<span class="token function">render</span><span class="token punctuation">(</span>
78  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
79    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
80      <span class="token punctuation">{</span>
81        backgroundColor<span class="token operator">:</span> <span class="token string">&#x27;hotpink&#x27;</span><span class="token punctuation">,</span>
82        <span class="token string">&#x27;&amp;:hover&#x27;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
83          color
84        <span class="token punctuation">}</span>
85      <span class="token punctuation">}</span><span class="token punctuation">,</span>
86      isDanger <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
87        color<span class="token operator">:</span> <span class="token string">&#x27;red&#x27;</span>
88      <span class="token punctuation">}</span>
89    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
90  <span class="token punctuation">&gt;</span></span><span class="token plain-text"></span>
91<span class="token plain-text">    This has a hotpink background.</span>
92<span class="token plain-text">  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
93<span class="token punctuation">)</span>
94</code></pre></div>
95<h3 id="global-styles"><a aria-hidden="true" tabindex="-1" href="#global-styles"><span class="icon icon-link"></span></a>Global Styles</h3>
96<p><code>injectGlobal</code> injects styles into the global scope and is useful for applications such as css resets or font faces.</p>
97<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">
97import</span> <span class="token imports"><span class="token punctuation">{</span> injectGlobal <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
98
99injectGlobal<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"></span>
100<span class="token string">  * {</span>
101<span class="token string">    box-sizing: border-box;</span>
102<span class="token string">  }</span>
103<span class="token string">  @font-face {</span>
104<span class="token string">    font-family: &#x27;Patrick Hand SC&#x27;;</span>
105<span class="token string">    font-style: normal;</span>
106<span class="token string">    font-weight: 400;</span>
107<span class="token string">    src: local(&#x27;Patrick Hand SC&#x27;),</span>
108<span class="token string">      local(&#x27;PatrickHandSC-Regular&#x27;),</span>
109<span class="token string">      url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)</span>
110<span class="token string">        format(&#x27;woff2&#x27;);</span>
111<span class="token string">    unicode-range: U+0100-024f, U+1-1eff,</span>
112<span class="token string">      U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,</span>
113<span class="token string">      U+A720-A7FF;</span>
114<span class="token string">  }</span>
115<span class="token string"></span><span class="token template-punctuation string">`</span></span>
116</code></pre></div>
117<h3 id="animation-keyframes"><a aria-hidden="true" tabindex="-1" href="#animation-keyframes"><span class="icon icon-link"></span></a>Animation Keyframes</h3>
118<p><code>keyframes</code> generates a unique animation name that can be used to animate elements with CSS animations.</p>
119<p><strong>String Styles</strong></p>
120<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// @live</span>
121<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> css<span class="token punctuation">,</span> keyframes <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
122
123<span class="token keyword">const</span> bounce <span class="token operator">=</span> keyframes<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
124  <span class="token selector">from<span class="token punctuation">,</span> 20%<span class="token punctuation">,</span> 53%<span class="token punctuation">,</span> 80%<span class="token punctuation">,</span> to</span> <span class="token punctuation">{</span>
125    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
126  <span class="token punctuation">}</span>
127
128  <span class="token selector">40%<span class="token punctuation">,</span> 43%</span> <span class="token punctuation">{</span>
129    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">-30</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
130  <span class="token punctuation">}</span>
131
132  <span class="token selector">70%</span> <span class="token punctuation">{</span>
133    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">-15</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
134  <span class="token punctuation">}</span>
135
136  <span class="token selector">90%</span> <span class="token punctuation">{</span>
137    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">-4</span><span class="token unit">px</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
138  <span class="token punctuation">}</span>
139</span><span class="token template-punctuation string">`</span></span>
140
141<span class="token function">render</span><span class="token punctuation">(</span>
142  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
143    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
144      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">96</span><span class="token unit">px</span><span class="token punctuation">;</span>
145      <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">96</span><span class="token unit">px</span><span class="token punctuation">;</span>
146      <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span>
147      <span class="token property">animation</span><span class="token punctuation">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bounce<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token number">1</span><span class="token unit">s</span> ease infinite<span class="token punctuation">;</span>
148      <span class="token property">transform-origin</span><span class="token punctuation">:</span> center bottom<span class="token punctuation">;</span>
149    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
150    <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>logoUrl<span class="token punctuation">}</span></span>
151  <span class="token punctuation">/&gt;</span></span>
152<span class="token punctuation">)</span>
153</code></pre></div>
154<p><strong>Object Styles</strong></p>
155<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// @live</span>
156<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> css<span class="token punctuation">,</span> keyframes <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
157
158<span class="token keyword">const</span> bounce <span class="token operator">=</span> <span class="token function">keyframes</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
159  <span class="token string">&#x27;from, 20%, 53%, 80%, to&#x27;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
160    transform<span class="token operator">:</span> <span class="token string">&#x27;translate3d(0,0,0)&#x27;</span>
161  <span class="token punctuation">}</span><span class="token punctuation">,</span>
162  <span class="token string">&#x27;40%, 43%&#x27;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
163    transform<span class="token operator">:</span> <span class="token string">&#x27;translate3d(0, -30px, 0)&#x27;</span>
164  <span class="token punctuation">}</span><span class="token punctuation">,</span>
165  <span class="token string">&#x27;70%&#x27;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
166    transform<span class="token operator">:</span> <span class="token string">&#x27;translate3d(0, -15px, 0)&#x27;</span>
167  <span class="token punctuation">}</span><span class="token punctuation">,</span>
168  <span class="token string">&#x27;90%&#x27;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
169    transform<span class="token operator">:</span> <span class="token string">&#x27;translate3d(0, -4px, 0)&#x27;</span>
170  <span class="token punctuation">}</span>
171<span class="token punctuation">}</span><span class="token punctuation">)</span>
172
173<span class="token function">render</span><span class="token punctuation">(</span>
174  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
175    <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>logoUrl<span class="token punctuation">}</span></span>
176    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
177      width<span class="token operator">:</span> <span class="token number">96</span><span class="token punctuation">,</span>
178      height<span class="token operator">:</span> <span class="token number">96</span><span class="token punctuation">,</span>
179      borderRadius<span class="token operator">:</span> <span class="token string">&#x27;50%&#x27;</span><span class="token punctuation">,</span>
180      animation<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bounce<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 1s ease infinite</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
181      transformOrigin<span class="token operator">:</span> <span class="token string">&#x27;center bottom&#x27;</span>
182    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
183  <span class="token punctuation">/&gt;</span></span>
184<span class="token punctuation">)</span>
185</code></pre></div>
186<h3 id="cx"><a aria-hidden="true" tabindex="-1" href="#cx"><span class="icon icon-link"></span></a>cx</h3>
187<p><code>cx</code> is emotion&#x27;
187s version of the popular <a href="https://github.com/JedWatson/classnames"><code>classnames</code> library</a>. The key advantage of <code>cx</code> is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.</p>
188<p><strong>Combining class names</strong></p>
189<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> cx<span class="token punctuation">,</span> css <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css&#x27;</span>
190
191<span class="token keyword">const</span> cls1 <span class="token operator">=</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
192  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
193  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
194</span><span class="token template-punctuation string">`</span></span>
195<span class="token keyword">const</span> cls2 <span class="token operator">=</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
196  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
197  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
198</span><span class="token template-punctuation string">`</span></span>
199
200<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">cx</span><span class="token punctuation">(</span>cls1<span class="token punctuation">,</span> cls2<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
201</code></pre></div>
202<p><strong>Conditional class names</strong></p>
203<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> cls1 <span class="token operator">=</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
204  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
205  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
206</span><span class="token template-punctuation string">`</span></span>
207<span class="token keyword">const</span> cls2 <span class="token operator">=</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
208  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
209  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
210</span><span class="token template-punctuation string">`</span></span>
211
212<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token boolean">true</span>
213<span class="token keyword">const</span> bar <span class="token operator">=</span> <span class="token boolean">
213false</span>
214
215
216<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
217  <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">cx</span><span class="token punctuation">(</span>
218    <span class="token punctuation">{</span> <span class="token punctuation">[</span>cls1<span class="token punctuation">]</span><span class="token operator">:</span> foo <span class="token punctuation">}</span><span class="token punctuation">,</span>
219    <span class="token punctuation">{</span> <span class="token punctuation">[</span>cls2<span class="token punctuation">]</span><span class="token operator">:</span> bar <span class="token punctuation">}</span>
220  <span class="token punctuation">)</span><span class="token punctuation">}</span></span>
221<span class="token punctuation">/&gt;</span></span>
222</code></pre></div>
223<p><strong>Using class names from other sources</strong></p>
224<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> cls1 <span class="token operator">=</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
225  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
226  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
227</span><span class="token template-punctuation string">`</span></span>
228
229<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
230  <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">cx</span><span class="token punctuation">(</span>cls1<span class="token punctuation">,</span> <span class="token string">&#x27;profile&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
231<span class="token punctuation">/&gt;</span></span>
232</code></pre></div>
233<h2 id="custom-instances"><a aria-hidden="true" tabindex="-1" href="#custom-instances"><span class="icon icon-link"></span></a>Custom Instances</h2>
234<p>With <code>@emotion/css/create-instance</code>, you can provide custom options to Emotion&#x27;s cache.</p>
235<p>The main <code>@emotion/css</code> entrypoint can be thought of as a call to <code>@emotion/css/create-instance</code> with sensible defaults for most applications.</p>
236<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword module">import</span> <span class="token imports">createEmotion</span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css/create-instance&#x27;</span>
237
238<span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token punctuation">{</span>
239  flush<span class="token punctuation">,</span>
240  hydrate<span class="token punctuation">,</span>
241  cx<span class="token punctuation">,</span>
242  merge<span class="token punctuation">,</span>
243  getRegisteredStyles<span class="token punctuation">,</span>
244  injectGlobal<span class="token punctuation">,</span>
245  keyframes<span class="token punctuation">,</span>
246  css<span class="token punctuation">,</span>
247  sheet<span class="token punctuation">,</span>
248  cache
249<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createEmotion</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
250</code></pre></div>
251<h3 id="upside"><a aria-hidden="true" tabindex="-1" href="#upside"><span class="icon icon-link"></span></a>Upside</h3>
252<ul>
253<li>
254<p>Calling it directly will allow for some low level customization.</p>
255</li>
256<li>
257<p>Create custom names for emotion APIs to help with migration from other, similar libraries.</p>
258</li>
259<li>
260<p>Could set custom <code>key</code> to something other than <code>css</code></p>
261</li>
262</ul>
263<h3 id="downside"><a aria-hidden="true" tabindex="-1" href="#downside"><span class="icon icon-link"></span></a>Downside</h3>
264<ul>
265<li>
266<p>Introduces some amount of complexity to your application that can vary depending on developer experience.</p>
267</li>
268<li>
269<p>Required to keep up with changes in the repo and API at a lower level than if using <code>@emotion/css</code> directly</p>
270</li>
271</ul>
272<h3 id="primary-use-cases"><a aria-hidden="true" tabindex="-1" href="#primary-use-cases"><span class="icon icon-link"></span></a>Primary use cases</h3>
273<ul>
274<li>
275<p>Using emotion in embedded contexts such as an <code>&lt;iframe/&gt;</code></p>
276</li>
277<li>
278<p>
278Setting a <a href="/docs/@emotion/cache#nonce-string">nonce</a> on any <code>&lt;style/&gt;</code> tag emotion creates for security purposes</p>
279</li>
280<li>
281<p>Use emotion with a container different than <code>document.head</code> for style elements</p>
282</li>
283<li>
284<p>Using emotion with custom stylis plugins</p>
285</li>
286</ul>
287<h2 id="multiple-instances-in-a-single-app-example"><a aria-hidden="true" tabindex="-1" href="#multiple-instances-in-a-single-app-example"><span class="icon icon-link"></span></a>Multiple instances in a single app example</h2>
288<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports">createEmotion</span> <span class="token keyword module">from</span> <span class="token string">&#x27;@emotion/css/create-instance&#x27;</span>
289
290<span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token punctuation">{</span>
291  flush<span class="token punctuation">,</span>
292  hydrate<span class="token punctuation">,</span>
293  cx<span class="token punctuation">,</span>
294  merge<span class="token punctuation">,</span>
295  getRegisteredStyles<span class="token punctuation">,</span>
296  injectGlobal<span class="token punctuation">,</span>
297  keyframes<span class="token punctuation">,</span>
298  css<span class="token punctuation">,</span>
299  sheet<span class="token punctuation">,</span>
300  cache
301<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createEmotion</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
302  <span class="token comment">// The key option is required when there will be multiple instances in a single app</span>
303  key<span class="token operator">:</span> <span class="token string">&#x27;some-key&#x27;</span>
304<span class="token punctuation">}</span><span class="token punctuation">)</span>
305</code></pre></div>
306<h2 id="options"><a aria-hidden="true" tabindex="-1" href="#options"><span class="icon icon-link"></span></a>Options</h2>
307<p><code>createEmotion</code> accepts the same options as <a href="/docs/@emotion/cache#options">createCache</a> from <code>@emotion/cache</code>.</p></main><style data-emotion="css 16lotkt">.css-16lotkt{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:none;}@media (min-width: 768px){.css-16lotkt{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:180px;display:block;margin-left:2rem;padding-left:2rem;border-left:1px solid #eac3e4;}}@media (min-width: 992px){.css-16lotkt{width:220px;}}</style><aside class="css-16lotkt"><style data-emotion="css-global 1ql5da">#carbonads{display:block;overflow:hidden;}#carbonads a,#carbonads a:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none;}#carbonads span{display:block;overflow:hidden;}#carbonads .carbon-img{display:block;line-height:1;}#carbonads .carbon-img img{display:block;border:solid 1px hsla(0, 0%, 7%, 0.1);}#carbonads .carbon-text{display:block;margin-top:0.5em;font-size:14px;line-height:1.35;}#carbonads .carbon-poweredby{display:block;margin-top:0.5em;font-size:10px;font-weight:600;line-height:1;letter-spacing:0.1ch;text-transform:uppercase;}@media only screen and (min-width: 320px) and (max-width: 759px){#carbonads{position:relative;}#carbonads .carbon-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}#carbonads .carbon-text{padding:0 12px;font-size:16px;}#carbonads .carbon-poweredby{padding-left:142px;}}</style><style data-emotion="css 1b62rxt">.css-1b62rxt{margin-bottom:2rem;}@media (min-width: 768px){.css-1b62rxt{min-height:200px;}}</style><div class="css-1b62rxt"></div><style data-emotion="css-global 1jvaydg">:root{--docsearch-primary-color:#D26AC2;--docsearch-searchbox-background:#f8f9fa;--docsearch-searchbox-focus-background:#f8f9fa;}.DocSearch-Button{margin:0 auto 2rem 0;width:100%;border:1px solid #d2d2d2;}.DocSearch-Button:hover{border-color:transparent;}.DocSearch-Button-Placeholder{display:block!important;}</style><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container">
307<svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button><style data-emotion="css l3h8gd">.css-l3h8gd{font-weight:bold;font-size:1.25rem;margin-bottom:6px;}</style><h3 class="css-l3h8gd">Getting Started</h3><style data-emotion="css 18b9lz1">.css-18b9lz1{list-style:none;margin:0;margin-bottom:1.5rem;padding:0;}</style><ul class="css-18b9lz1"><li><style data-emotion="css 1hfmrak">.css-1hfmrak{display:block;padding-top:6px;padding-bottom:6px;color:#212529;}.css-1hfmrak:hover{color:#D26AC2;-webkit-text-decoration:none;text-decoration:none;}.css-1hfmrak.active{font-weight:600;color:#C43BAD;}.css-1hfmrak.active::before{content:"";height:2rem;width:0.5rem;-webkit-transform:translate(-2rem, -0.25rem);-moz-transform:translate(-2rem, -0.25rem);-ms-transform:translate(-2rem, -0.25rem);transform:translate(-2rem, -0.25rem);position:absolute;display:inline-block;background-color:#eac3e4;}</style><a class="css-1hfmrak" href="/docs/introduction">Introduction</a></li><li><a class="css-1hfmrak" href="/docs/install">Install</a></li><li><a class="css-1hfmrak" href="/docs/css-prop">The css Prop</a></li><li><a class="css-1hfmrak" href="/docs/styled">Styled Components</a></li><li><a class="css-1hfmrak" href="/docs/composition">Composition</a></li><li><a class="css-1hfmrak" href="/docs/object-styles">Object Styles</a></li><li><a class="css-1hfmrak" href="/docs/nested">Nested Selectors</a></li><li><a class="css-1hfmrak" href="/docs/media-queries">Media Queries</a></li><li><a class="css-1hfmrak" href="/docs/globals">Global Styles</a></li><li><a class="css-1hfmrak" href="/docs/package-summary">Package Summaries</a></li></ul><h3 class="css-l3h8gd">Advanced</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/best-practices">Best Practices</a></li><li><a class="css-1hfmrak" href="/docs/keyframes">Keyframes</a></li><li><a class="css-1hfmrak" href="/docs/ssr">Server Side Rendering</a></li><li><a class="css-1hfmrak" href="/docs/with-props">Attaching Props</a></li><li><a class="css-1hfmrak" href="/docs/theming">Theming</a></li><li><a class="css-1hfmrak" href="/docs/labels">Labels</a></li><li><a class="css-1hfmrak" href="/docs/class-names">Class Names</a></li><li><a class="css-1hfmrak" href="/docs/cache-provider">CacheProvider</a></li><li><a class="css-1hfmrak" href="/docs/performance">Performance</a></li><li><a class="css-1hfmrak" href="/docs/for-library-authors">For Library Authors</a></li></ul><h3 class="css-l3h8gd">Tooling</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/babel">Babel Plugin</a></li><li><a class="css-1hfmrak" href="/docs/babel-macros">Babel Macros</a></li><li><a class="css-1hfmrak" href="/docs/source-maps">Source Maps</a></li><li><a class="css-1hfmrak" href="/docs/testing">Snapshot Testing</a></li><li><a class="css-1hfmrak" href="/docs/typescript">TypeScript</a></li><li><a class="css-1hfmrak" href="/docs/eslint-plugin-react">eslint-plugin-react</a></li></ul><h3 class="css-l3h8gd">Packages</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/@emotion/react">@emotion/react</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/styled">@emotion/styled</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/cache">@emotion/cache</a></li><li><a class="active css-1hfmrak" href="/docs/@emotion/css">@emotion/css</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/babel-plugin">@emotion/babel-plugin</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/eslint-plugin">@emotion/eslint-plugin</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/server">@emotion/server</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/jest">@emotion/jest</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/native">@emotion/native</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/primitives">@emotion/primitives</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/babel-preset-css-prop">@emotion/babel-preset-css-prop</a></li></ul><h3 class="css-l3h8gd">Posts</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/emotion-11">Emotion 11</a></li><li><a class="css-1hfmrak" href="/docs/migrating-to-emotion-10">Migrating to Emotion 10</a></li></ul></aside></div><style data-emotion="css 3yyr7k">.css-3yyr7k{position:fixed;bottom:0;right:0;border-radius:50%;background-color:#C43BAD;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;
307-webkit-justify-content:center;justify-content:center;padding:1.1rem;margin:2rem;width:3.5rem;height:3.5rem;line-height:1;-webkit-transition:150ms ease-in-out background-color;transition:150ms ease-in-out background-color;border:none;color:white;z-index:500;}.css-3yyr7k svg{width:100%;}@media (min-width: 768px){.css-3yyr7k{display:none;}}</style><button class="css-3yyr7k"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></path></svg></button></div></div>
307<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"@emotion/css","title":"@emotion/css","mdx":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, {})\n  })) : _createMdxContent();\n  function _createMdxContent() {\n    const _components = Object.assign({\n      p: \"p\",\n      a: \"a\",\n      h2: \"h2\",\n      span: \"span\",\n      ul: \"ul\",\n      li: \"li\",\n      code: \"code\",\n      div: \"div\",\n      pre: \"pre\",\n      h3: \"h3\",\n      h4: \"h4\",\n      strong: \"strong\"\n    }, _provideComponents(), props.components);\n    return _jsxs(_Fragment, {\n      children: [_jsxs(_components.p, {\n        children: [\"The \", _jsx(_components.a, {\n          href: \"https://www.npmjs.com/package/@emotion/css\",\n          children: \"@emotion/css\"\n        }), \" package is framework agnostic and the simplest way to use Emotion.\"]\n      }), \"\\n\", _jsxs(_components.h2, {\n        id: \"table-of-contents\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#table-of-contents\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Table of Contents\"]\n      }), \"\\n\", _jsxs(_components.ul, {\n        children: [\"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"#quick-start\",\n            children: \"Quick Start\"\n          })\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [_jsx(_components.a, {\n            href: \"#api\",\n            children: \"API\"\n          }), \"\\n\", _jsxs(_components.ul, {\n            children: [\"\\n\", _jsx(_components.li, {\n              children: _jsxs(_components.a, {\n                href: \"#css\",\n                children: [\"Generate Class Names — \", _jsx(_components.code, {\n                  children: \"css\"\n                })]\n              })\n            }), \"\\n\", _jsx(_components.li, {\n              children: _jsxs(_components.a, {\n                href: \"#global-styles\",\n                children: [\"Global Styles — \", _jsx(_components.code, {\n                  children: \"injectGlobal\"\n                })]\n              })\n            }), \"\\n\", _jsx(_components.li, {\n              children: _jsxs(_components.a, {\n                href: \"#animation-keyframes\",\n                children: [\"Animation Keyframes — \", _jsx(_components.code, {\n                  children: \"keyframes\"\n                })]\n              })\n            }), \"\\n\", _jsx(_components.li, {\n              children: _jsxs(_components.a, {\n                href: \"#cx\",\n                children: [\"Composing Class Names — \", _jsx(_components.code, {\n                  children: \"cx\"\n                })]\n              })\n            }), \"\\n\"]\n          }), \"\\n\"]\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"#custom-instances\",\n            children: \"Custom Instances\"\n          })\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"/docs/ssr#api\",\n            children: \"Server Side Rendering\"\n          })\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"/docs/@emotion/babel-plugin\",\n            children: \"Babel Plugin\"\n          })\n        }), \"\\n\"]\n      }), \"\\n\", _jsxs(_components.h2, {\n        id: \"quick-start\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#quick-start\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Quick Start\"]\n      }), \"\\n\", _jsx(_components.p, {\n        children: \"Get up and running with a single import.\"\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-bash\",\n          children: _jsxs(_components.c
307ode, {\n            className: \"language-bash\",\n            children: [_jsx(_components.span, {\n              className: \"token function\",\n              children: \"npm\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"install\"\n            }), \" --save @emotion/css\\n\"]\n          })\n        })\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-javascript\",\n          children: _jsxs(_components.code, {\n            className: \"language-javascript\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" css \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" app \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token dom variable\",\n              children: \"document\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \".\"\n            }), _jsx(_components.span, {\n              className: \"token method function property-access\",\n              children: \"getElementById\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'root'\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" myStyle \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" css\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"color\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" rebeccapurple\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\napp\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \".\"\n            }), _jsx(_components.span, {\n              className: \"token property-access\",\n              children: \"classList\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \".\"\n            }), _jsx(_components.span, {\n              className: \"token method function property-access\",\n              children: \"add\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), \"myStyle\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h2, {\n        id: \"api\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#api\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"API\"]\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"css\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#css\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"css\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [\"The \", _jsx(_components.c
307ode, {\n          children: \"css\"\n        }), \" function accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.\"]\n      }), \"\\n\", _jsxs(_components.h4, {\n        id: \"string-styles\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#string-styles\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"String Styles\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token comment\",\n              children: \"// @live\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" css \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" color \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'darkgreen'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"render\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), \"\\n  \", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"div\"]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"css\", _jsxs(_components.span, {\n                  className: \"token template-string\",\n                  children: [_jsx(_components.span, {\n                    className: \"token template-punctuation string\",\n                    children: \"`\"\n                  }), _jsxs(_components.span, {\n                    className: \"token css language-css\",\n                    children: [\"\\n      \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"background-color\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" \", _jsx(_components.span, {\n                      className: \"token color\",\n                      children: \"hotpink\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \";\"\n                    }), \"\\n      \", _jsxs(_components.span, {\n                      className: \"token selector\",\n                      children: [\"\u0026\", _jsx(_components.span, {\n                        className: \"token pseudo-class\",\n                        children: \":hover\"\n                      })]\n                    }), \" \", _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \"{\"\n                    }), \"\\n        \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"color\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" \", _jsxs(_components.span, {\n                      className: \"token interpolation\",\n                      children: [_jsx(_components.span, {\n                        className: \"token interpolation-punctuation punctuation\",\n                        children: \"${\"\n                      }), \"color\", _jsx(_components.span, {\n                        className: \"token interpolation-punctuation punctuation\",\n                        children: \"}\"\n                      })]\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \";\"\n                    }), \"\\n      \", _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \"}\"\n                    }), \"\\n    \"]\n                  }), _jsx(_components.span, {\n                    className: \"token template-punctuation string\",\n                    children: \"`\"\n                  })]\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"\u003e\"\n              })]\n            }), _jsx(_components.span, {\n              className: \"token plain-text\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token plain-text\",\n              children: \"    This has a hotpink background.\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token plain-text\",\n              children: \"  \"\n            }), _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c/\"\n                }), \"div\"]\n              }), _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"\u003e\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h4, {\n        id: \"object-styles\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#object-styles\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Object Styles\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.c
307ode, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token comment\",\n              children: \"// @live\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" css \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" color \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'darkgreen'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"render\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), \"\\n  \", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"div\"]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"css\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n      backgroundColor\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'hotpink'\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n      \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'\u0026:hover'\"\n                }), _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n        color\\n      \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"\u003e\"\n              })]\n            }), _jsx(_components.span, {\n              className: \"token plain-text\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token plain-text\",\n              children: \"    This has a hotpink background.\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token plain-text\",\n              children: \"  \"\n            }), _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c/\"\n                }), \"div\"]\n              }), _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"\u003e\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h4, {\n        id: \"array-of-object-styles\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#array-of-object-styles\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Array of Object Styles\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.c
307ode, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token comment\",\n              children: \"// @live\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" css \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" color \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'darkgreen'\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" isDanger \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token boolean\",\n              children: \"true\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"render\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), \"\\n  \", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"div\"]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"css\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"[\"\n                }), \"\\n      \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n        backgroundColor\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'hotpink'\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n        \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'\u0026:hover'\"\n                }), _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n          color\\n        \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n      \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n      isDanger \", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \"\u0026\u0026\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n        color\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'red'\"\n                }), \"\\n      \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"]\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"\u003e\"\n              })]\n            }), _jsx(_components.span, {\n              className: \"token plain-text\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token plain-text\",\n              children: \"    This has a hotpink background.\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token plain-text\",\n              children: \"  \"\n            }), _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c/\"\n                }), \"div\"]\n              }), _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"\u003e\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"global-styles\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#global-styles\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Global Styles\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [_jsx(_components.c
307ode, {\n          children: \"injectGlobal\"\n        }), \" injects styles into the global scope and is useful for applications such as css resets or font faces.\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" injectGlobal \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\ninjectGlobal\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsx(_components.span, {\n                className: \"token string\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"  * {\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"    box-sizing: border-box;\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"  }\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"  @font-face {\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"    font-family: 'Patrick Hand SC';\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"    font-style: normal;\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"    font-weight: 400;\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"    src: local('Patrick Hand SC'),\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"      local('PatrickHandSC-Regular'),\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"      url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"        format('woff2');\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"    unicode-range: U+0100-024f, U+1-1eff,\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"      U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"      U+A720-A7FF;\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\",\n                children: \"  }\"\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token string\"\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"animation-keyframes\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#animation-keyframes\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Animation Keyframes\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [_jsx(_components.c
307ode, {\n          children: \"keyframes\"\n        }), \" generates a unique animation name that can be used to animate elements with CSS animations.\"]\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: \"String Styles\"\n        })\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token comment\",\n              children: \"// @live\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" css\", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \",\"\n              }), \" keyframes \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" bounce \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" keyframes\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsxs(_components.span, {\n                  className: \"token selector\",\n                  children: [\"from\", _jsx(_components.span, {\n                    className: \"token punctuation\",\n                    children: \",\"\n                  }), \" 20%\", _jsx(_components.span, {\n                    className: \"token punctuation\",\n                    children: \",\"\n                  }), \" 53%\", _jsx(_components.span, {\n                    className: \"token punctuation\",\n                    children: \",\"\n                  }), \" 80%\", _jsx(_components.span, {\n                    className: \"token punctuation\",\n                    children: \",\"\n                  }), \" to\"]\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"transform\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"translate3d\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n\\n  \", _jsxs(_components.span, {\n                  className: \"token selector\",\n                  children: [\"40%\", _jsx(_components.span, {\n                    className: \"token punctuation\",\n                    children: \",\"\n                  }), \" 43%\"]\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"transform\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"translate3d\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"-30\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n\\n  \", _jsx(_components.span, {\n                  className: \"token selector\",\n                  children: \"70%\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"transform\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"translate3d\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"-15\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n\\n  \", _jsx(_components.span, {\n                  className: \"token selector\",\n                  children: \"90%\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"transform\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"translate3d\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"-4\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"0\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"render\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), \"\\n  \", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"img\"]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"css\", _jsxs(_components.span, {\n                  className: \"token template-string\",\n                  children: [_jsx(_components.span, {\n                    className: \"token template-punctuation string\",\n                    children: \"`\"\n                  }), _jsxs(_components.span, {\n                    className: \"token css language-css\",\n                    children: [\"\\n      \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"width\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" \", _jsx(_components.span, {\n                      className: \"token number\",\n                      children: \"96\"\n                    }), _jsx(_components.span, {\n                      className: \"token unit\",\n                      children: \"px\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \";\"\n                    }), \"\\n      \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"height\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" \", _jsx(_components.span, {\n                      className: \"token number\",\n                      children: \"96\"\n                    }), _jsx(_components.span, {\n                      className: \"token unit\",\n                      children: \"px\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \";\"\n                    }), \"\\n      \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"border-radius\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" \", _jsx(_components.span, {\n                      className: \"token number\",\n                      children: \"50\"\n                    }), _jsx(_components.span, {\n                      className: \"token unit\",\n                      children: \"%\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \";\"\n                    }), \"\\n      \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"animation\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" \", _jsxs(_components.span, {\n                      className: \"token interpolation\",\n                      children: [_jsx(_components.span, {\n                        className: \"token interpolation-punctuation punctuation\",\n                        children: \"${\"\n                      }), \"bounce\", _jsx(_components.span, {\n                        className: \"token interpolation-punctuation punctuation\",\n                        children: \"}\"\n                      })]\n                    }), \" \", _jsx(_components.span, {\n                      className: \"token number\",\n                      children: \"1\"\n                    }), _jsx(_components.span, {\n                      className: \"token unit\",\n                      children: \"s\"\n                    }), \" ease infinite\", _jsx(_components.span, {\n                      className: \"token punctuation\",\n          
307            children: \";\"\n                    }), \"\\n      \", _jsx(_components.span, {\n                      className: \"token property\",\n                      children: \"transform-origin\"\n                    }), _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \":\"\n                    }), \" center bottom\", _jsx(_components.span, {\n                      className: \"token punctuation\",\n                      children: \";\"\n                    }), \"\\n    \"]\n                  }), _jsx(_components.span, {\n                    className: \"token template-punctuation string\",\n                    children: \"`\"\n                  })]\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"src\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"logoUrl\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"/\u003e\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: \"Object Styles\"\n        })\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token comment\",\n              children: \"// @live\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" css\", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \",\"\n              }), \" keyframes \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" bounce \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"keyframes\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'from, 20%, 53%, 80%, to'\"\n            }), _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n    transform\", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'translate3d(0,
3070,0)'\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'40%, 43%'\"\n            }), _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n    transform\", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'translate3d(0, -30px, 0)'\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'70%'\"\n            }), _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n    transform\", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'translate3d(0, -15px, 0)'\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'90%'\"\n            }), _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n    transform\", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'translate3d(0, -4px, 0)'\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"render\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), \"\\n  \", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"img\"]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"src\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"logoUrl\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n    \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"css\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \"\\n      width\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"96\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n      height\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"96\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n      borderRadius\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'50%'\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n      animation\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsxs(_components.span, {\n                  className: \"token template-string\",\n                  children: [_jsx(_components.span, {\n                    className: \"token template-punctuation string\",\n                    children: \"`\"\n                  }), _jsxs(_components.span, {\n                    className: \"token interpolation\",\n                    children: [_jsx(_components.span, {\n                      className: \"token interpolation-punctuation punctuation\",\n                      children: \"${\"\n                    }), \"bounce\", _jsx(_components.span, {\n                      className: \"token interpolation-punctuation punctuation\",\n                      children: \"}\"\n                    })]\n                  }), _jsx(_components.span, {\n                    className: \"token string\",\n                    children: \" 1s ease infinite\"\n                  }), _jsx(_components.span, {\n                    className: \"token template-punctuation string\",\n                    children: \"`\"\n                  })]\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n      transformOrigin\", _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'center bottom'\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"/\u003e\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"cx\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#cx\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"cx\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [_jsx(_components.c
307ode, {\n          children: \"cx\"\n        }), \" is emotion's version of the popular \", _jsxs(_components.a, {\n          href: \"https://github.com/JedWatson/classnames\",\n          children: [_jsx(_components.code, {\n            children: \"classnames\"\n          }), \" library\"]\n        }), \". The key advantage of \", _jsx(_components.code, {\n          children: \"cx\"\n        }), \" is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.\"]\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: \"Combining class names\"\n        })\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsxs(_components.span, {\n              className: \"token imports\",\n              children: [_jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"{\"\n              }), \" cx\", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \",\"\n              }), \" css \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"}\"\n              })]\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" cls1 \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" css\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"font-size\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"20\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"background\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token color\",\n                  children: \"green\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" cls2 \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" css\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"font-size\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"20\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"background\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token color\",\n                  children: \"blue\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\\n\", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"div\"]\n              }), \" \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"cx\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), \"cls1\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \" cls2\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \" \", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"/\u003e\"\n              })]\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: \"Conditional class names\"\n        })\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.c
307ode, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" cls1 \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" css\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"font-size\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"20\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"background\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token color\",\n                  children: \"green\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" cls2 \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" css\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"font-size\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"20\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"background\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token color\",\n                  children: \"blue\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" foo \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token boolean\",\n              children: \"true\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" bar \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token boolean\",\n              children: \"false\"\n            }
307), \"\\n\\n\\n\", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"div\"]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"cx\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"[\"\n                }), \"cls1\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"]\"\n                }), _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" foo \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \"\\n    \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"[\"\n                }), \"cls2\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"]\"\n                }), _jsx(_components.span, {\n                  className: \"token operator\",\n                  children: \":\"\n                }), \" bar \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"/\u003e\"\n              })]\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: \"Using class names from other sources\"\n        })\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" cls1 \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" css\", _jsxs(_components.span, {\n              className: \"token template-string\",\n              children: [_jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              }), _jsxs(_components.span, {\n                className: \"token css language-css\",\n                children: [\"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"font-size\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token number\",\n                  children: \"20\"\n                }), _jsx(_components.span, {\n                  className: \"token unit\",\n                  children: \"px\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n  \", _jsx(_components.span, {\n                  className: \"token property\",\n                  children: \"background\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \":\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token color\",\n                  children: \"green\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \";\"\n                }), \"\\n\"]\n              }), _jsx(_components.span, {\n                className: \"token template-punctuation string\",\n                children: \"`\"\n              })]\n            }), \"\\n\\n\", _jsxs(_components.span, {\n              className: \"token tag\",\n              children: [_jsxs(_components.span, {\n                className: \"token tag\",\n                children: [_jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"\u003c\"\n                }), \"div\"]\n              }), \"\\n  \", _jsx(_components.span, {\n                className: \"token attr-name\",\n                children: \"className\"\n              }), _jsxs(_components.span, {\n                className: \"token script language-javascript\",\n                children: [_jsx(_components.span, {\n                  className: \"token script-punctuation punctuation\",\n                  children: \"=\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"{\"\n                }), _jsx(_components.span, {\n                  className: \"token function\",\n                  children: \"cx\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"(\"\n                }), \"cls1\", _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \",\"\n                }), \" \", _jsx(_components.span, {\n                  className: \"token string\",\n                  children: \"'profile'\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \")\"\n                }), _jsx(_components.span, {\n                  className: \"token punctuation\",\n                  children: \"}\"\n                })]\n              }), \"\\n\", _jsx(_components.span, {\n                className: \"token punctuation\",\n                children: \"/\u003e\"\n              })]\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h2, {\n        id: \"custom-instances\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#custom-instances\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Custom Instances\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [\"With \", _jsx(_components.c
307ode, {\n          children: \"@emotion/css/create-instance\"\n        }), \", you can provide custom options to Emotion's cache.\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [\"The main \", _jsx(_components.code, {\n          children: \"@emotion/css\"\n        }), \" entrypoint can be thought of as a call to \", _jsx(_components.code, {\n          children: \"@emotion/css/create-instance\"\n        }), \" with sensible defaults for most applications.\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-javascript\",\n          children: _jsxs(_components.code, {\n            className: \"language-javascript\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token imports\",\n              children: \"createEmotion\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css/create-instance'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"export\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n  flush\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  hydrate\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  cx\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  merge\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  getRegisteredStyles\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  injectGlobal\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  keyframes\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  css\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  sheet\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  cache\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"createEmotion\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"upside\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#upside\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Upside\"]\n      }), \"\\n\", _jsxs(_components.ul, {\n        children: [\"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Calling it directly will allow for some low level customization.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Create custom names for emotion APIs to help with migration from other, similar libraries.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"Could set custom \", _jsx(_components.c
307ode, {\n              children: \"key\"\n            }), \" to something other than \", _jsx(_components.code, {\n              children: \"css\"\n            })]\n          }), \"\\n\"]\n        }), \"\\n\"]\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"downside\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#downside\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Downside\"]\n      }), \"\\n\", _jsxs(_components.ul, {\n        children: [\"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Introduces some amount of complexity to your application that can vary depending on developer experience.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"Required to keep up with changes in the repo and API at a lower level than if using \", _jsx(_components.code, {\n              children: \"@emotion/css\"\n            }), \" directly\"]\n          }), \"\\n\"]\n        }), \"\\n\"]\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"primary-use-cases\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#primary-use-cases\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Primary use cases\"]\n      }), \"\\n\", _jsxs(_components.ul, {\n        children: [\"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"Using emotion in embedded contexts such as an \", _jsx(_components.code, {\n              children: \"\u003ciframe/\u003e\"\n            })]\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"Setting a \", _jsx(_components.a, {\n              href: \"/docs/@emotion/cache#nonce-string\",\n              children: \"nonce\"\n            }), \" on any \", _jsx(_components.code, {\n              children: \"\u003cstyle/\u003e\"\n            }), \" tag emotion creates for security purposes\"]\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"Use emotion with a container different than \", _jsx(_components.code, {\n              children: \"document.head\"\n            }), \" for style elements\"]\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Using emotion with custom stylis plugins\"\n          }), \"\\n\"]\n        }), \"\\n\"]\n      }), \"\\n\", _jsxs(_components.h2, {\n        id: \"multiple-instances-in-a-single-app-example\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#multiple-instances-in-a-single-app-example\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Multiple instances in a single app example\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-jsx\",\n          children: _jsxs(_components.code, {\n            className: \"language-jsx\",\n            children: [_jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"import\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token imports\",\n              children: \"createEmotion\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"from\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'@emotion/css/create-instance'\"\n            }), \"\\n\\n\", _jsx(_components.span, {\n              className: \"token keyword module\",\n              children: \"export\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token keyword\",\n              children: \"const\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n  flush\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  hydrate\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  cx\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  merge\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  getRegisteredStyles\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  injectGlobal\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  keyframes\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  css\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  sheet\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \",\"\n            }), \"\\n  cache\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \"=\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token function\",\n              children: \"createEmotion\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"(\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"{\"\n            }), \"\\n  \", _jsx(_components.span, {\n              className: \"token comment\",\n              children: \"// The key option is required when there will be multiple instances in a single app\"\n            }), \"\\n  key\", _jsx(_components.span, {\n              className: \"token operator\",\n              children: \":\"\n            }), \" \", _jsx(_components.span, {\n              className: \"token string\",\n              children: \"'some-key'\"\n            }), \"\\n\", _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \"}\"\n            }), _jsx(_components.span, {\n              className: \"token punctuation\",\n              children: \")\"\n            }), \"\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.h2, {\n        id: \"options\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#options\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Options\"]\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [_jsx(_components.c
307ode, {\n          children: \"createEmotion\"\n        }), \" accepts the same options as \", _jsx(_components.a, {\n          href: \"/docs/@emotion/cache#options\",\n          children: \"createCache\"\n        }), \" from \", _jsx(_components.code, {\n          children: \"@emotion/cache\"\n        }), \".\"]\n      })]\n    });\n  }\n}\nreturn {\n  default: MDXContent\n};\n","frontmatter":{},"scope":{}},"docGroups":[{"title":"Getting Started","docs":[{"slug":"introduction","title":"Introduction"},{"slug":"install","title":"Install"},{"slug":"css-prop","title":"The css Prop"},{"slug":"styled","title":"Styled Components"},{"slug":"composition","title":"Composition"},{"slug":"object-styles","title":"Object Styles"},{"slug":"nested","title":"Nested Selectors"},{"slug":"media-queries","title":"Media Queries"},{"slug":"globals","title":"Global Styles"},{"slug":"package-summary","title":"Package Summaries"}]},{"title":"Advanced","docs":[{"slug":"best-practices","title":"Best Practices"},{"slug":"keyframes","title":"Keyframes"},{"slug":"ssr","title":"Server Side Rendering"},{"slug":"with-props","title":"Attaching Props"},{"slug":"theming","title":"Theming"},{"slug":"labels","title":"Labels"},{"slug":"class-names","title":"Class Names"},{"slug":"cache-provider","title":"CacheProvider"},{"slug":"performance","title":"Performance"},{"slug":"for-library-authors","title":"For Library Authors"},{"slug":"community","title":"Community"}]},{"title":"Tooling","docs":[{"slug":"babel","title":"Babel Plugin"},{"slug":"babel-macros","title":"Babel Macros"},{"slug":"source-maps","title":"Source Maps"},{"slug":"testing","title":"Snapshot Testing"},{"slug":"typescript","title":"TypeScript"},{"slug":"eslint-plugin-react","title":"eslint-plugin-react"}]},{"title":"Packages","docs":[{"slug":"@emotion/react","title":"@emotion/react"},{"slug":"@emotion/styled","title":"@emotion/styled"},{"slug":"@emotion/cache","title":"@emotion/cache"},{"slug":"@emotion/css","title":"@emotion/css"},{"slug":"@emotion/babel-plugin","title":"@emotion/babel-plugin"},{"slug":"@emotion/eslint-plugin","title":"@emotion/eslint-plugin"},{"slug":"@emotion/server","title":"@emotion/server"},{"slug":"@emotion/jest","title":"@emotion/jest"},{"slug":"@emotion/native","title":"@emotion/native"},{"slug":"@emotion/primitives","title":"@emotion/primitives"},{"slug":"@emotion/babel-preset-css-prop","title":"@emotion/babel-preset-css-prop"}]},{"title":"Posts","docs":[{"slug":"emotion-11","title":"Emotion 11"},{"slug":"migrating-to-emotion-10","title":"Migrating to Emotion 10"}]}]},"__N_SSG":true},"page":"/docs/@emotion/[packageName]","query":{"packageName":"css"},"buildId":"S-1L7vLJVVMbIYWtqiwHZ","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
307</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.