Stack Overflow
Stack Overflow

Questions tagged [emotion]

Emotion is a performant and flexible CSS-in-JS library. It's inspired by many other CSS-in-JS libraries like glam, glamor, styled-components and glamorous.

Emotion is a performant and flexible CSS-in-JS library. It's inspired by many other CSS-in-JS libraries like glam, glamor, styled-components and glamorous. It allows you to style applications quickly with string styles or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching and insertRule in production.

Example

import { css } from 'emotion'

render(
    <div
        className={css`
            color: hotpink;
        `}
    >
        Some text.
    </div>
)

Resources

Packages

Related tags

617 questions
11
votes
0 answers

Terminology Emotion-Generic Error When Viewing Images

This has been bugging me for a little, I have no experience with the emotion libraries. I installed terminology with sudo apt-get install terminology Unfortunately when I try to set a background for the terminal or use tycat I get the following…
user4891016
10
votes
2 answers

emotion use css prop with custom components

In my application I have a component that I want to style with the css prop from outside. function Component({css}:{css?: React.CSSProperties}) { // some stuff going on here return (
Skyy2010
  • 795
  • 7
  • 19
10
votes
5 answers

emotion css feature is not rendering the styles (React)

I'm using Webpack 4, Babel 7 and Emotion 10. I installed @emotion/core, @emotion/styled, and the recommended plugin babel-plugin-emotion. styled is working properly. I can create a styled component and use it. However, if I try to use the native…
Peter
  • 2,004
  • 2
  • 24
  • 57
10
votes
1 answer

Insert id attribute to styled components created by react-emotion

The basic use of styling plain HTML elements with react-emotion as React components is like this: import React from 'react'; import styled from 'react-emotion'; const StyledContainer = styled.div` display: block; box-sizing: border-box; `; The…
sdabrutas
  • 1,477
  • 2
  • 14
  • 28
10
votes
3 answers

Styled Component dynamic tag name

I want to make a dynamic component. (the dynamic TAG will be a styled component -> emotion) const Dynamic = ({ tag: Tag, children, ...rest }) => { children } The component will be a styled component like: const…
Istvan Orban
  • 1,607
  • 3
  • 18
  • 34
9
votes
3 answers

What is the proper way to enable the css prop in Emotion 11/Next js 10 apps

The css prop is not recognized at build time. I'm unsure if this is due to misconfiguration of the project, or if this represents a known bug. Type '{ children: (string | number | boolean | {} | ReactElement…
Jonathan Currie
  • 93
  • 1
  • 1
  • 4
9
votes
2 answers

Emotion theming with TypeScript: Property 'X' does not exist on type 'object'. ts(2339)

I can't find a way to make Emotion theming work with TypeScript. import React from "react"; import { ThemeProvider } from "emotion-theming"; import styled from "@emotion/styled"; const theme = { colors: { gray: "#ccc", }, }; const…
webdif
  • 6,341
  • 3
  • 18
  • 15
9
votes
1 answer

Is there a way to increase specificity by adding the element with Emotion?

We have a styled component that and when it compiles it adds a class name such as this:
link
This is all good, except for instances where someone has CSS declared similar to the following: .app a…
amrinea
  • 553
  • 4
  • 12
9
votes
2 answers

emotion-js on Create React App - 'jsx' is defined but never used

So I tried to use emotion-js for the first time and get hooked by the css prop feature. While trying what the documentation says I get a warning from the eslint. 'jsx' is defined but never used @typescript-eslint/no-unused-vars The script that I…
Michael Harley
  • 831
  • 1
  • 9
  • 20
9
votes
2 answers

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:
Moshe
  • 6,011
  • 16
  • 60
  • 112
9
votes
1 answer

jest snapshot breaks with emotion 10 / babel 7 using enzyme

So I had jest snapshots working properly generating css and html in the snapshots with babel 6 / emotion 9 however I need wanted to update to babel 7 and emotion 10 but my snapshot tests with enzyme no longer work. The code compiles and works fine…
ryanzec
  • 27,284
  • 38
  • 112
  • 169
9
votes
2 answers

Material-ui overrides react emotion rules

In my project I use Material-ui components along with react-emotion. Let me give you an example that is problematic. I have this element: where const statNumber = css`padding: 0;` this way…
Nickey
  • 1,191
  • 1
  • 13
  • 21
8
votes
1 answer

In Material-UI v5, should I prefer the css prop over the sx prop or vice versa?

I believe these two props both use emotion under the hood and they seem to do much the same thing. I've been using the css prop because I prefer template tags and real css vs. javascript style names for css properties. Is there any reason to prefer…
btmorex
  • 476
  • 5
  • 16
8
votes
1 answer

Styling with Emotion in React gives ":nth-child" is potentially unsafe when doing server-side rendering error

Using Emotion for a React project I'm styling a particular div element with padding-bottom as the following: export const StyledItem = styled('div')(() => ({ '&:nth-child(1) > div:nth-child(1)': { paddingBottom: '1px' } })) And getting the…
norbitrial
  • 14,716
  • 7
  • 32
  • 59
7
votes
4 answers

Getting warning from props passed in MUI styled components related to React not recognizing it

I have a styled component that needs to receive props to decide how it should be styled. Looks something like this: const StyledTypography = styled(Typography)( ({ myColor = "black", isLarge = false }) => ({ "&&": { fontSize: isLarge ?…
theJuls
  • 6,788
  • 14
  • 73
  • 160
1
2
3
…
41 42