Topics include:<ul><li>What CSS-in-JS even is</li><li>What Emotion does differently than other CSS-in-JS libraries</li><li>How to actually use Emotion to style your projects</li><li>How the JSX pragma works and what it's for</li><li>How Emotion works under the hood</li><li>Performance</li><li>Adding global styles to your project</li><li>Style re-use and composition in Emotion</li><li>Using Emotion with server-side rendering</li></ul>Sponsors:<ul><li><a href="https://cloudinary.com/users/register/free?utm_source=fullstackradio&amp;utm_medium=Sponsored_Podcast&amp;utm_content=fullstackradio_PodCast">Cloudinary</a>, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free</li><li><a href="https://www.digitalocean.com/?refcode=74a1c5d63dac&amp;utm_source=fullstackradio&amp;utm_medium=podcast&amp;utm_campaign=DO_Dev_Signup_Cold_FullStackRadio_Podcast">DigitalOcean</a>, get your free $50 credit at <a href="https://do.co/fullstack">do.co/fullstack</a></li></ul>Links:<ul><li><a href="https://emotion.sh">Emotion</a></li><li><a href="https://github.com/threepointone/glam">Glam</a></li><li><a href="https://github.com/threepointone/glamor">Glamor</a></li><li><a href="https://github.com/paypal/glamorous">Glamorous</a></li><li><a href="https://www.styled-components.com/">Styled Components</a></li><li><a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#options">JSX pragma</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule">CSSStyleSheet.insertRule()</a></li><li><a href="https://emotion.sh/docs/globals">Global styles in Emotion</a></li><li><a href="https://emotion.sh/docs/ssr">Server-side rendering in Emotion</a></li></ul>

In this episode, Adam talks to Mitchell Hamilton about writing your styles directly in your JavaScript components using the CSS-in-JS library Emotion.

Full Stack Radio

117: Mitchell Hamilton - Writing CSS-in-JS with Emotion