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

[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

Vanilla Emotion Cache Usage

I am currently using vanilla Emotion in a widget and a component library (emotion as an external dependency) that the widget consumes. My widget is built as a web component and is using shadow dom. For encapsulation purposes I want all of the widget AND component styles attached…

thumbsup
0
message-simple
2

How can I use multiple classes on an element with Emotion in Angular?

I'm having an issue trying to apply multiple classes to elements using Emotion, take this button and a class as a very rough example just to illustrate the point: Now if I have a second class which I also want to apply to the button: And apply that class also to the button: …

thumbsup
2
message-simple
0

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
6

Pseudo selector syntax

I am trying to style the first and last list items and a pseudo element of each: However, no styles are being applied to the first/last element or their before elements. I have tried with the & in front also, but no luck. Is this 1. possible? 2. the correct syntax?

thumbsup
0
message-simple
3

Selecting a different class when hovering over a different component in emotion

Hello how can select/style a component when hovering over another different component in emotion. FOr example, in css Is it possible to do this in emotion js?

thumbsup
0
message-simple
4

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
2

Component based styles?

I was using <Global /> to attach styles to each component. I'm wondering if there is a way to take something like this and attach it only to the component where the CSS is.

thumbsup
0
message-simple
0