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

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

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

thumbsup
0
message-simple
1

What is the benefit of passing props as it is now working with typescript

I have written the following code import styled from '@emotion/styled' import { space, width, fontSize, color,SpaceProps,WidthProps, } from 'styled-system'; …

thumbsup
1
message-simple
0

Cascading/Bleeding to children

In Angular and I suppose Svelte you create scoped CSS which is entirely scoped to the component via a generated attribute selector. I am liking the API of emotion, however is there a way to disable the cascading or rather bleeding css properties to the children? If not do you…

thumbsup
0
message-simple
1

Anyone suddenly missing highlighting/intellisense in VS Code?

Was working great a few days ago; all css in css template literal was highlighted as CSS, intellisense worked as if it was css... Suddenly today VS Code seems to think its just a string. I don't think I added/removed any extensions or changed any settings. Not sure what I'm…

thumbsup
0
message-simple
2

Why use ThemeProvider?

Hello, I don't know how to use "ThemeProvider" in my react application, could someone help me? And I also have a second question. What's the point of using the theme provider? …

thumbsup
0
message-simple
3