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 '@emotion/css' 24 25const color = 'white' 26 27render( 28 <div 29 className={css` 30 padding: 32px; 31 background-color: hotpink; 32 font-size: 24px; 33 border-radius: 4px; 34 &:hover { 35 color: ${color}; 36 } 37 `} 38 > 39 Hover to change color. 40 </div> 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">'@emotion/css'</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">'white'</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"><</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">&: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">></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"></</span><span class="token tag">div</span><span class="token tag punctuation">></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 '@emotion/react' 107 108const color = 'white' 109 110render( 111 <div 112 css={css` 113 padding: 32px; 114 background-color: hotpink; 115 font-size: 24px; 116 border-radius: 4px; 117 &:hover { 118 color: ${color}; 119 } 120 `} 121 > 122 Hover to change color. 123 </div> 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">'@emotion/react'</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">'white'</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"><</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">&: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">></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"></</span><span class="token tag">div</span><span class="token tag punctuation">></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 '@emotion/styled' 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 &:hover { 167 color: white; 168 } 169` 170 171render(<Button>This my button component.</Button>)</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">'@emotion/styled'</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">&: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"><</span><span class="token tag class-name">Button</span><span class="token tag punctuation">></span><span class="token plain-text">This my button component.</span><span class="token tag punctuation"></</span><span class="token tag class-name">Button</span><span class="token tag punctuation">></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">"original" 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.