menu

emotion

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

Channels
# All channels
view-forward
# General
view-forward
# Development
view-forward
# Help
view-forward
# Off Topic
view-forward
Team
Posts
Members
Info

Minimize the class name hash generated by emotion

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

thumbsup
0
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

thumbsup
0
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…

thumbsup
0
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; …

thumbsup
0
message-simple
1

Is there a Vscode extension to highlight css tagged literals

I'm using vscode-styled-components now, but this extension doesn't highlight the css tagged literals.

thumbsup
0
message-simple
0

css prop isn't applying styles as expected

Hey everyone! I'm using emotion in a component library built using storybook. When importing this component library into my application, I'm unable to override default styles using the css prop. My component has some default styles using emotion. In my application, I'm importing…

thumbsup
0
message-simple
4

Looking for example projects using emotion + react

I am looking at emotion for my next project. Until now, I was working with scss and using BEM. I want to learn the best practices of how to organize the constants and common variables (design system) inside the project, how to introduce common components and allow expanding the…

thumbsup
0
message-simple
2

How to use @emotion/babel-preset-css-prop with Expo?

Hey! I'm trying to use Emotion with Expo + Typescript, since there's no typings for v10, i'm using v11, and i've noticed that adding @emotion/babel-preset-css-prop to babel.config.js i get Unexpected token '{'. Import call expects exactly one argument on Expo app on Android,…

thumbsup
0
message-simple
0

Best place to add css objects in React Class and "jsx is declared" warning

Hello Emotion community, a couple beginner questions I am using in some places old classic React classes. I am also using css objects for the styling (css={nameOfTheVariableObject} …

thumbsup
0
message-simple
3

Hover on parent with targeting child

Hi everyone, I can't figure out how to deal with the situation when I need to have a hover effect for children but hover over the parent element. An example is here https://codesandbox.io/s/bold-nightingale-bg1rl?file=/src/App.js Is there something I do wrong?

thumbsup
0
message-simple
0