PageSourceSearch

https://emotion.netlify.app/docs/introduction

html emotion.netlify.app collected 2026-10-03 10:41:51 UTC 70,556 bytes, 209 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 – Introduction</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/%5Bslug%5D-65a8be4fce8c76d9.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">Introduction</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/docs/introduction.mdx" 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>Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.</p>
2<hr/>
3<p>There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.</p>
4<h3 id="framework-agnostic"><a aria-hidden="true" tabindex="-1" href="#framework-agnostic"><span class="icon icon-link"></span></a>Framework Agnostic</h3>
5<div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i @emotion/css
6</code></pre></div>
7<p><strong><a href="/docs/@emotion/css"><code>@emotion/css</code> documentation</a></strong></p>
8<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>
9<ul>
10<li>
11<p>Requires no additional setup, babel plugin, or other config changes.</p>
12</li>
13<li>
14<p>Has support for auto vendor-prefixing, nested selectors, and media queries.</p>
15</li>
16<li>
17<p>You simply prefer to use the <code>css</code> function to generate class names and <code>cx</code> to compose them.</p>
18</li>
19<li>
20<p>Server side rendering requires <a href="/docs/ssr#api">
20additional work to set up</a></p>
21</li>
22</ul>
23<div class="emotion-live-editor"><style data-emotion="css 8huwwr">@media (min-width: 768px){.css-8huwwr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-8huwwr"><style data-emotion="css a26p4u">.css-a26p4u{background-color:rgb(40, 41, 54);caret-color:white;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;}@media (min-width: 768px){.css-a26p4u{width:50%;border-bottom-left-radius:0.5rem;border-top-right-radius:0;}}</style><style data-emotion="css 1mku5rb">.css-1mku5rb{white-space:pre;font-family:monospace;background-color:rgb(40, 41, 54);caret-color:white;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;}.css-1mku5rb pre,.css-1mku5rb textarea{font-size:0.875rem!important;}@media (min-width: 768px){.css-1mku5rb{width:50%;border-bottom-left-radius:0.5rem;border-top-right-radius:0;}}</style><div class="css-1mku5rb" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">import { css } from &#x27;@emotion/css&#x27;
24
25const color = &#x27;white&#x27;
26
27render(
28  &lt;div
29    className={css`
30      padding: 32px;
31      background-color: hotpink;
32      font-size: 24px;
33      border-radius: 4px;
34      &amp;:hover {
35        color: ${color};
36      }
37    `}
38  &gt;
39    Hover to change color.
40  &lt;/div&gt;
41)</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line"><span class="token keyword">import</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> css </span><span class="token punctuation">}</span><span class="token plain"> </span><span class="token keyword">from</span><span class="token plain"> </span><span class="token string">&#x27;@emotion/css&#x27;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">
42</span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> color </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string">&#x27;white&#x27;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">
43</span></div><div class="token-line"><span class="token plain"></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"></span></div><div class="token-line"><span class="token tag">    </span><span class="token tag attr-name">className</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">css</span><span class="token tag script language-javascript styled-template-string string language-css">`</span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">padding</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> 32px</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">background-color</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> hotpink</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">font-size</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> 24px</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">border-radius</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> 4px</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css selector">&amp;:hover</span><span class="token tag script language-javascript styled-template-string string language-css"> </span><span class="token tag script language-javascript styled-template-string string language-css punctuation">{</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">        </span><span class="token tag script language-javascript styled-template-string string language-css property">color</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> </span><span class="token tag script language-javascript styled-template-string interpolation interpolation-punctuation punctuation">${</span><span class="token tag script language-javascript styled-template-string interpolation">color</span><span class="token tag script language-javascript styled-template-string interpolation interpolation-punctuation punctuation">}</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css punctuation">}</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">    `</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"></span></div><div class="token-line"><span class="token tag">  </span><span class="token tag punctuation">&gt;</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text">    Hover to change color.</span></div><div class="token-line"><span class="token plain-text">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">)</span></div></pre><style type="text/css">
44/**
45 * Reset the text fill color so that placeholder is visible
46 */
47.npm__react-simple-code-editor__textarea:empty {
48  -webkit-text-fill-color: inherit !important;
49}
50
51/**
52 * Hack to apply on some CSS on IE10 and IE11
53 */
54@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
55  /**
56    * IE doesn't support '-webkit-text-fill-color'
57    * So we use 'color: transparent' to make the text transparent on IE
58    * Unlike other browsers, it doesn't affect caret color in IE
59    */
60  .npm__react-simple-code-editor__textarea {
61    color: transparent !important;
62  }
63
64  .npm__react-simple-code-editor__textarea::selection {
65    background-color: #accef7 !important;
66    color: transparent !important;
67  }
68}
69</style></div><style data-emotion="css mivcui">.css-mivcui{padding:0.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid #d2d2d2;border-top-style:none;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;}@media (min-width: 768px){.css-mivcui{width:50%;border-top-style:solid;border-left-style:none;border-top-right-radius:0.5rem;border-bottom-left-radius:0;}}</style><div class="css-mivcui"><style data-emotion="css 1un9qma">.css-1un9qma{-webkit-flex:1;-ms-flex:1;flex:1;padding:0.5rem;margin-bottom:0;color:#dc3545;}</style><style data-emotion="css 12mcb0">.css-12mcb0{-webkit-flex:1;-ms-flex:1;flex:1;padding:0.5rem 0.5rem 1.5rem 0.5rem;overflow-x:auto;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;-webkit-justify-content:center;justify-content:center;}.css-12mcb0:empty{display:none;}</style><div class="css-12mcb0"></div><style data-emotion="css 10klutf">.css-10klutf{text-align:center;font-size:0.875rem;color:#adb5bd;}</style><div class="css-10klutf">(Edit code to see changes)</div></div></div></div>
70<h3 id="react"><a aria-hidden="true" tabindex="-1" href="#react"><span class="icon icon-link"></span></a>React</h3>
71<div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i @emotion/react
72</code></pre></div>
73<p>The <a href="https://www.npmjs.com/package/@emotion/react">@emotion/react</a> package requires React and is recommended for users of that framework if possible.</p>
74<ul>
75<li>
76<p>Best when using React with a build environment that can be configured.</p>
77</li>
78<li>
79<p><code>css</code> prop support</p>
80<ul>
81<li>
82<p>Similar to the <code>style</code> prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.</p>
83</li>
84<li>
85<p>Allows developers to skip the <code>styled</code> API abstraction and style components and elements directly.</p>
86</li>
87<li>
88<p>The <code>css</code> prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.</p>
89</li>
90<li>
91<p>Reduces boilerplate when composing components and styled with emotion.</p>
92</li>
93</ul>
94</li>
95<li>
96<p>Server side rendering with zero configuration.</p>
97</li>
98<li>
99<p>Theming works out of the box.</p>
100</li>
101<li>
102<p>ESLint plugins available to ensure proper patterns and configuration are set.</p>
103</li>
104</ul>
105<p><strong><a href="/docs/css-prop"><code>@emotion/react</code> css prop documentation</a></strong></p>
106<div class="emotion-live-editor"><div class="css-8huwwr"><div class="css-1mku5rb" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">import { css } from &#x27;@emotion/react&#x27;
107
108const color = &#x27;white&#x27;
109
110render(
111  &lt;div
112    css={css`
113      padding: 32px;
114      background-color: hotpink;
115      font-size: 24px;
116      border-radius: 4px;
117      &amp;:hover {
118        color: ${color};
119      }
120    `}
121  &gt;
122    Hover to change color.
123  &lt;/div&gt;
124)</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line"><span class="token keyword">
124import</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> css </span><span class="token punctuation">}</span><span class="token plain"> </span><span class="token keyword">from</span><span class="token plain"> </span><span class="token string">&#x27;@emotion/react&#x27;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">
125</span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> color </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string">&#x27;white&#x27;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">
126</span></div><div class="token-line"><span class="token plain"></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"></span></div><div class="token-line"><span class="token tag">    </span><span class="token tag attr-name">css</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">css</span><span class="token tag script language-javascript styled-template-string string language-css">`</span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">padding</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> 32px</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">background-color</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> hotpink</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">font-size</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> 24px</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css property">border-radius</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> 4px</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css selector">&amp;:hover</span><span class="token tag script language-javascript styled-template-string string language-css"> </span><span class="token tag script language-javascript styled-template-string string language-css punctuation">{</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">        </span><span class="token tag script language-javascript styled-template-string string language-css property">color</span><span class="token tag script language-javascript styled-template-string string language-css punctuation">:</span><span class="token tag script language-javascript styled-template-string string language-css"> </span><span class="token tag script language-javascript styled-template-string interpolation interpolation-punctuation punctuation">${</span><span class="token tag script language-javascript styled-template-string interpolation">color</span><span class="token tag script language-javascript styled-template-string interpolation interpolation-punctuation punctuation">}</span><span class="token tag script language-javascript styled-template-string">;</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">      </span><span class="token tag script language-javascript styled-template-string string language-css punctuation">}</span><span class="token tag script language-javascript styled-template-string string language-css"></span></div><div class="token-line"><span class="token tag script language-javascript styled-template-string string language-css">    `</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"></span></div><div class="token-line"><span class="token tag">  </span><span class="token tag punctuation">&gt;</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text">    Hover to change color.</span></div><div class="token-line"><span class="token plain-text">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">)</span></div></pre><style type="text/css">
127/**
128 * Reset the text fill color so that placeholder is visible
129 */
130.npm__react-simple-code-editor__textarea:empty {
131  -webkit-text-fill-color: inherit !important;
132}
133
134/**
135 * Hack to apply on some CSS on IE10 and IE11
136 */
137@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
138  /**
139    * IE doesn't support '-webkit-text-fill-color'
140    * So we use 'color: transparent' to make the text transparent on IE
141    * Unlike other browsers, it doesn't affect caret color in IE
142    */
143  .npm__react-simple-code-editor__textarea {
144    color: transparent !important;
145  }
146
147  .npm__react-simple-code-editor__textarea::selection {
148    background-color: #accef7 !important;
149    color: transparent !important;
150  }
151}
152</style></div><div class="css-mivcui"><div class="css-12mcb0"></div><div class="css-10klutf">(Edit code to see changes)</div></div></div></div>
153<div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i @emotion/styled @emotion/react
154</code></pre></div>
155<p>The <a href="https://www.npmjs.com/package/@emotion/styled">@emotion/styled</a> package is for those who prefer to use the <code>styled.div</code> style API for creating components.</p>
156<p><strong><a href="/docs/styled"><code>@emotion/styled</code> documentation</a></strong></p>
157<div class="emotion-live-editor"><div class="css-8huwwr"><div class="css-1mku5rb" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">import styled from &#x27;@emotion/styled&#x27;
158
159const Button = styled.button`
160  padding: 32px;
161  background-color: hotpink;
162  font-size: 24px;
163  border-radius: 4px;
164  color: black;
165  font-weight: bold;
166  &amp;:hover {
167    color: white;
168  }
169`
170
171render(&lt;Button&gt;This my button component.&lt;/Button&gt;)</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line"><span class="token keyword">import</span><span class="token plain"> styled </span><span class="token keyword">from</span><span class="token plain"> </span><span class="token string">&#x27;@emotion/styled&#x27;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">
172</span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> Button </span><span class="token operator">=</span><span class="token plain"> styled</span><span class="token punctuation">.</span><span class="token plain">button</span><span class="token styled-template-string string language-css">`</span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css property">padding</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> 32px</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css property">background-color</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> hotpink</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css property">font-size</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> 24px</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css property">border-radius</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> 4px</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css property">color</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> black</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css property">font-weight</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> bold</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css selector">&amp;:hover</span><span class="token styled-template-string string language-css"> </span><span class="token styled-template-string string language-css punctuation">{</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">    </span><span class="token styled-template-string string language-css property">color</span><span class="token styled-template-string string language-css punctuation">:</span><span class="token styled-template-string string language-css"> white</span><span class="token styled-template-string">;</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">  </span><span class="token styled-template-string string language-css punctuation">}</span><span class="token styled-template-string string language-css"></span></div><div class="token-line"><span class="token styled-template-string string language-css">`</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">
173</span></div><div class="token-line"><span class="token plain"></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Button</span><span class="token tag punctuation">&gt;</span><span class="token plain-text">This my button component.</span><span class="token tag punctuation">&lt;/</span><span class="token tag class-name">Button</span><span class="token tag punctuation">&gt;</span><span class="token punctuation">)</span></div></pre><style type="text/css">
174/**
175 * Reset the text fill color so that placeholder is visible
176 */
177.npm__react-simple-code-editor__textarea:empty {
178  -webkit-text-fill-color: inherit !important;
179}
180
181/**
182 * Hack to apply on some CSS on IE10 and IE11
183 */
184@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
185  /**
186    * IE doesn't support '-webkit-text-fill-color'
187    * So we use 'color: transparent' to make the text transparent on IE
188    * Unlike other browsers, it doesn't affect caret color in IE
189    */
190  .npm__react-simple-code-editor__textarea {
191    color: transparent !important;
192  }
193
194  .npm__react-simple-code-editor__textarea::selection {
195    background-color: #accef7 !important;
196    color: transparent !important;
197  }
198}
199</style></div><div class="css-mivcui"><div class="css-12mcb0"></div><div class="css-10klutf">(Edit code to see changes)</div></div></div></div>
200<h3 id="browser-requirements"><a aria-hidden="true" tabindex="-1" href="#browser-requirements"><span class="icon icon-link"></span></a>Browser requirements</h3>
201<p>Emotion supports all popular browsers and Internet Explorer 11.</p>
202<h3 id="libraries-that-inspired-us"><a aria-hidden="true" tabindex="-1" href="#libraries-that-inspired-us"><span class="icon icon-link"></span></a>Libraries that Inspired Us</h3>
203<ul>
204<li><a href="https://github.com/threepointone/glam/tree/e9bca3950f12503246ed7fccad5cf13e5e9c86e3">&quot;original&quot; glam</a></li>
205<li><a href="https://github.com/threepointone/glam">glam</a></li>
206<li><a href="https://github.com/threepointone/glamor">glamor</a></li>
207<li><a href="https://www.styled-components.com/">styled-components</a></li>
208<li><a href="https://glamorous.rocks">glamorous</a></li>
209</ul></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"><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="active 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="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">
209@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;-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>
209<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"introduction","title":"Introduction","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      hr: \"hr\",\n      h3: \"h3\",\n      a: \"a\",\n      span: \"span\",\n      div: \"div\",\n      pre: \"pre\",\n      code: \"code\",\n      strong: \"strong\",\n      ul: \"ul\",\n      li: \"li\"\n    }, _provideComponents(), props.components), {EmotionLiveEditor} = _components;\n    if (!EmotionLiveEditor) _missingMdxReference(\"EmotionLiveEditor\", true);\n    return _jsxs(_Fragment, {\n      children: [_jsx(_components.p, {\n        children: \"Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.\"\n      }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.p, {\n        children: \"There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.\"\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"framework-agnostic\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#framework-agnostic\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Framework Agnostic\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-bash\",\n          children: _jsxs(_components.code, {\n            className: \"language-bash\",\n            children: [_jsx(_components.span, {\n              className: \"token function\",\n              children: \"npm\"\n            }), \" i @emotion/css\\n\"]\n          })\n        })\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: _jsxs(_components.a, {\n            href: \"/docs/@emotion/css\",\n            children: [_jsx(_components.code, {\n              children: \"@emotion/css\"\n            }), \" documentation\"]\n          })\n        })\n      }), \"\\n\", _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.ul, {\n        children: [\"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Requires no additional setup, babel plugin, or other config changes.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Has support for auto vendor-prefixing, nested selectors, and media queries.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"You simply prefer to use the \", _jsx(_components.code, {\n              children: \"css\"\n            }), \" function to generate class names and \", _jsx(_components.code, {\n              children: \"cx\"\n            }), \" to compose them.\"]\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [\"Server side rendering requires \", _jsx(_components.a, {\n              href: \"/docs/ssr#api\",\n              children: \"additional work to 
209set up\"\n            })]\n          }), \"\\n\"]\n        }), \"\\n\"]\n      }), \"\\n\", _jsx(EmotionLiveEditor, {\n        code: \"import { css } from '@emotion/css'\\n\\nconst color = 'white'\\n\\nrender(\\n  \u003cdiv\\n    className={css`\\n      padding: 32px;\\n      background-color: hotpink;\\n      font-size: 24px;\\n      border-radius: 4px;\\n      \u0026:hover {\\n        color: ${color};\\n      }\\n    `}\\n  \u003e\\n    Hover to change color.\\n  \u003c/div\u003e\\n)\"\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"react\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#react\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"React\"]\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-bash\",\n          children: _jsxs(_components.code, {\n            className: \"language-bash\",\n            children: [_jsx(_components.span, {\n              className: \"token function\",\n              children: \"npm\"\n            }), \" i @emotion/react\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [\"The \", _jsx(_components.a, {\n          href: \"https://www.npmjs.com/package/@emotion/react\",\n          children: \"@emotion/react\"\n        }), \" package requires React and is recommended for users of that framework if possible.\"]\n      }), \"\\n\", _jsxs(_components.ul, {\n        children: [\"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Best when using React with a build environment that can be configured.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsxs(_components.p, {\n            children: [_jsx(_components.code, {\n              children: \"css\"\n            }), \" prop support\"]\n          }), \"\\n\", _jsxs(_components.ul, {\n            children: [\"\\n\", _jsxs(_components.li, {\n              children: [\"\\n\", _jsxs(_components.p, {\n                children: [\"Similar to the \", _jsx(_components.code, {\n                  children: \"style\"\n                }), \" prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.\"]\n              }), \"\\n\"]\n            }), \"\\n\", _jsxs(_components.li, {\n              children: [\"\\n\", _jsxs(_components.p, {\n                children: [\"Allows developers to skip the \", _jsx(_components.code, {\n                  children: \"styled\"\n                }), \" API abstraction and style components and elements directly.\"]\n              }), \"\\n\"]\n            }), \"\\n\", _jsxs(_components.li, {\n              children: [\"\\n\", _jsxs(_components.p, {\n                children: [\"The \", _jsx(_components.code, {\n                  children: \"css\"\n                }), \" prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.\"]\n              }), \"\\n\"]\n            }), \"\\n\", _jsxs(_components.li, {\n              children: [\"\\n\", _jsx(_components.p, {\n                children: \"Reduces boilerplate when composing components and styled with emotion.\"\n              }), \"\\n\"]\n            }), \"\\n\"]\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Server side rendering with zero configuration.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"Theming works out of the box.\"\n          }), \"\\n\"]\n        }), \"\\n\", _jsxs(_components.li, {\n          children: [\"\\n\", _jsx(_components.p, {\n            children: \"ESLint plugins available to ensure proper patterns and configuration are set.\"\n          }), \"\\n\"]\n        }), \"\\n\"]\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: _jsxs(_components.a, {\n            href: \"/docs/css-prop\",\n            children: [_jsx(_components.c
209ode, {\n              children: \"@emotion/react\"\n            }), \" css prop documentation\"]\n          })\n        })\n      }), \"\\n\", _jsx(EmotionLiveEditor, {\n        code: \"import { css } from '@emotion/react'\\n\\nconst color = 'white'\\n\\nrender(\\n  \u003cdiv\\n    css={css`\\n      padding: 32px;\\n      background-color: hotpink;\\n      font-size: 24px;\\n      border-radius: 4px;\\n      \u0026:hover {\\n        color: ${color};\\n      }\\n    `}\\n  \u003e\\n    Hover to change color.\\n  \u003c/div\u003e\\n)\"\n      }), \"\\n\", _jsx(_components.div, {\n        className: \"remark-highlight\",\n        children: _jsx(_components.pre, {\n          className: \"language-bash\",\n          children: _jsxs(_components.code, {\n            className: \"language-bash\",\n            children: [_jsx(_components.span, {\n              className: \"token function\",\n              children: \"npm\"\n            }), \" i @emotion/styled @emotion/react\\n\"]\n          })\n        })\n      }), \"\\n\", _jsxs(_components.p, {\n        children: [\"The \", _jsx(_components.a, {\n          href: \"https://www.npmjs.com/package/@emotion/styled\",\n          children: \"@emotion/styled\"\n        }), \" package is for those who prefer to use the \", _jsx(_components.code, {\n          children: \"styled.div\"\n        }), \" style API for creating components.\"]\n      }), \"\\n\", _jsx(_components.p, {\n        children: _jsx(_components.strong, {\n          children: _jsxs(_components.a, {\n            href: \"/docs/styled\",\n            children: [_jsx(_components.code, {\n              children: \"@emotion/styled\"\n            }), \" documentation\"]\n          })\n        })\n      }), \"\\n\", _jsx(EmotionLiveEditor, {\n        code: \"import styled from '@emotion/styled'\\n\\nconst Button = styled.button`\\n  padding: 32px;\\n  background-color: hotpink;\\n  font-size: 24px;\\n  border-radius: 4px;\\n  color: black;\\n  font-weight: bold;\\n  \u0026:hover {\\n    color: white;\\n  }\\n`\\n\\nrender(\u003cButton\u003eThis my button component.\u003c/Button\u003e)\"\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"browser-requirements\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#browser-requirements\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Browser requirements\"]\n      }), \"\\n\", _jsx(_components.p, {\n        children: \"Emotion supports all popular browsers and Internet Explorer 11.\"\n      }), \"\\n\", _jsxs(_components.h3, {\n        id: \"libraries-that-inspired-us\",\n        children: [_jsx(_components.a, {\n          \"aria-hidden\": \"true\",\n          tabIndex: \"-1\",\n          href: \"#libraries-that-inspired-us\",\n          children: _jsx(_components.span, {\n            className: \"icon icon-link\"\n          })\n        }), \"Libraries that Inspired Us\"]\n      }), \"\\n\", _jsxs(_components.ul, {\n        children: [\"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"https://github.com/threepointone/glam/tree/e9bca3950f12503246ed7fccad5cf13e5e9c86e3\",\n            children: \"\\\"original\\\" glam\"\n          })\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"https://github.com/threepointone/glam\",\n            children: \"glam\"\n          })\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"https://github.com/threepointone/glamor\",\n            children: \"glamor\"\n          })\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"https://www.styled-components.com/\",\n            children: \"styled-components\"\n          })\n        }), \"\\n\", _jsx(_components.li, {\n          children: _jsx(_components.a, {\n            href: \"https://glamorous.rocks\",\n            children: \"glamorous\"\n          })\n        }), \"\\n\"]\n      })]\n    });\n  }\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\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"}]}
209,{"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/[slug]","query":{"slug":"introduction"},"buildId":"S-1L7vLJVVMbIYWtqiwHZ","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
209</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.