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

create-react-app css prop

Hey all. I've seen styled-components take advantage of Create React App's support via its macro: https://medium.com/styled-components/css-prop-support-for-create-react-app-37e8c5d96861 …

thumbsup
1
message-simple
3

How to handle third party libs css?

Hello, who can suggest how to handle third party libs css? Is there a way to auto import them and use as style? I was thinking to use composition but it doesn't work with ssr... Or maybe I miss something? Thanks.

thumbsup
0
message-simple
3

Emotion 10 class names in tests

I am converting from CSS Modules to Emotion and am having trouble with testing. Some of my tests check that certain class names get applied when their corresponding prop is passed to the component. CSS Modules allows you to disable the hashing/labeling and get the raw class name…

thumbsup
0
message-simple
8

Is it possible to use object Styles and className together?

Like this:

thumbsup
0
message-simple
5

Enzyme Shallow Rendering and Emotion 10

When updating my team's project from Emotion 9 to Emotion 10 our component unit tests which use shallow rendering do not work anymore. Does Emotion 10 support shallow rendering?

thumbsup
0
message-simple
0

Cannot read property '__emotion_forwardProp' of undefined

Hi! I'm building a nextjs app (v9.2.1) and using emotion / styled system to build the UI. When I compile for production and run the server, I get this error in the console: which apparently means tag is undefined. Not sure how this would be possible using styled. …

thumbsup
0
message-simple
0

Media Queries in Emotion Styled Components

The Emotion docs tell us how to make reusable media queries that works in the css prop. This allows us to make the following queries in a css prop: With mq[0] and mq[1] referring to the first two items in a breakpoints array. For example: const breakpoints = [576, 768, 992,…

thumbsup
0
message-simple
3

[SOLVED] css prop styles not appearing in built components

Hi, I'm working on a Component library built with React / Emotion / Styled System / Babel / Typescript / Rollup. I am finding that styles applied with the css prop are not appearing in my consuming app. The styles applied via Styled System are showing up. But the styles defined…

thumbsup
1
message-simple
3

props.theme is `object` instead of `any`

Hi, I'm using emotion-theming along with TypeScript. In the lambda of a simple component using the styled API, props.theme is always of type object instead of any like indicated in the Emotion documentation. Versions: Additionally, if I bypass the error by casting props.theme to…

thumbsup
0
message-simple
2

Setting props when creating a styled component

I'm using Framer Motion, and instead of setting the props in my JSX, I want to set the props when I create my Styled Component. Instead of I want to do something like: …

thumbsup
0
message-simple
4