menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

emotion

Emotion is a css-in-js library focused on performance and developer experience

Channels
Team
Posts
Members
Info

I can't install npm install --save @ emotion / react

Unrecognized token in source text. At line:1 char:20 • npm install --save <<<< @emotion/react …

message-simple
0

What's the recommended way to type useRef with emotion styled components

For example: So far, I've been manually searching for what type the component is and typing it in. For example, above it would be useRef<HTMLDivElement>. Is there a more type-friendly way of doing this? Maybe something akin to useRef<HTMLType<Wrapper>>? Thank you!!

message-simple
0

use css prop with a custom component

Hi, I posted this question in stackoverflow: https://stackoverflow.com/questions/66746494/emotion-use-css-prop-with-custom-components However, I am not sure if the real question is whether my intended usage is a good way to use emotion? The fact that I couldn't google any…

message-simple
0

The emotion/styled classname breaks snapshot tests

Is there a way of making the classnames not change every time you edit some styling?

message-simple
6

Using css`...` in Styled Component syntax

My team and I started to use Emotion with the Styled Component syntax and so far it's been pretty straightforward to use. However, at some point we came across the following syntax when there are multiple properties that need something from the props: Another colleague didn't…

message-simple
0

Help with TS-based + emotion design system error

Hi. I have a React TS-based design system built with emotion, styled-system, and theme-ui and am encountering a TS error I can't seem to resolve. It seems like a simple fix, I just haven't been able to debug it... I'm seeing the issue in…

message-simple
0

Minimize the class name hash generated by emotion

Hi! How can I minimize the class name hash generated by emotion? From: To:

message-simple
1

codemod help

hi, might I ask how exactly to use codemod to run @emotion/pkg-renaming and rename (supposedly we have lots of eslint error in the project) and we want to rename/fix only emotion related lines

message-simple
0

Migrating to Emotion is causing a big increase in Layout Shift (with SSR)

Hey all. I just migrated a project from Linaria to Emotion, but am seeing a massive increase in Cumulative Layout Shift, and I'm not sure why. I'm using Next.js and can confirm that critical CSS extraction is working fine after looking at the HTML output. It's my understanding…

message-simple
5

Cannot use other components as selector in css helper

Hey guys. Currently trying to use emotion with typescript (and next.js). I'm trying to reference components as selectors in the css helper like so: const navBarStyles = css` display: flex; …

message-simple
1