emotion

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…

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…

Emotion VSCode plugin (idea)

Hi y'all, I've been thinking of making a plugin like https://github.com/tailwindlabs/tailwindcss-intellisense Would anyone be interested in collaborating on it?

Is the slack channel going to be reintroduced or is the community jst here now?

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} …

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,…

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?

Does emotion have something similar to StyleSheetManager in SC?

Hi, I need to inject style tag into a specific DOM element. In Styled-Components this can be done using StyleSheetManager: https://styled-components.com/docs/api#stylesheetmanager Can I do the same in emotion?

I used bootstrap classes, and supposed I want to change some values in class…

Eg. if class is .text-danger for text danger color is red …

Class Name generation

I'm working on implementing an infinite scroll feature on a blog. When the user scrolls 2/3rds down on the article then I asynchronously fetch the next article and add the content and styles to the DOM. I'm using Next.js with Emotion 9 create-emotion-server and a global cache.…