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
32
votes
2 answers

Styled-component vs jss vs emotion for React

I'm trying to understand the best choice (as a CTO) between jss emotion styled-component. I will try not to make the question "too wide" or "off-topic", because it's a very subjective topic. I'll try to answer (here) the question myself if no-one…
Cyril CHAPON
  • 3,556
  • 4
  • 22
  • 40
28
votes
1 answer

Data sets for emotion detection in text

I'm implementing a system that could detect the human emotion in text. Are there any manually annotated data sets available for supervised learning and testing? Here are some interesting datasets: https://dataturks.com/projects/trending
ekka
  • 355
  • 1
  • 4
  • 11
25
votes
3 answers

Create new component and inherit styles from styled-component

const Button = styled.button` display: inline-block; width: 300px; background-color: black; ` const ButtonHref = styled.a` ${Button} ` So I have two styled-components. I want to inherit 'Button' styles but create another tag. I use…
Lamer_2005
  • 387
  • 2
  • 4
  • 9
25
votes
2 answers

What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?

This seems to be a best practice, since it is used almost everywhere. However, nowhere is it clearly explained what exactly it does ... I did find a comment in the docs that said: "This comment tells babel to convert jsx to calls to a function…
David Deprost
  • 4,072
  • 1
  • 20
  • 27
25
votes
3 answers

Audio analysis to detect human voice, gender, age and emotion -- any prior open-source work done?

Is there prior open-source work done in the field of 'Audio analysis' to detect human-voice (say in spite of some background noise), determine speaker's gender, possibly determine no. of speakers, age of speaker(s), and the emotion of speakers? My…
mike.dinnone
  • 732
  • 2
  • 8
  • 17
22
votes
3 answers

Need Haar Casscades for Nose, Eyes & Lips(Mouth)

I need Haar Cascades xml files for Mouth, Eyes & Nose. Do provide me useful links. Any kind of help would be highly appreciated.
Nishant Shah
  • 1,590
  • 1
  • 15
  • 25
22
votes
7 answers

CSS Emotion Library - Getting css props error when using css prop

This is my code import { css, jsx } from '@emotion/core' return ( <>
  • Our Clients
  • What We Do
    • …
    Tom Hanks
    • 594
    • 1
    • 5
    • 21
    21
    votes
    5 answers

    Material UI 5 class name styles

    I migrated from Mui 4 to 5 and wonder how to use class names. If I want to apply certain styles to just one component there is the SX property. However, I'm struggling with using the same class for multiple components. In v4 my code looked like…
    Tom
    • 1,358
    • 2
    • 14
    • 36
    20
    votes
    3 answers

    Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

    I'm trying to use the CSS Prop of Emotion 11 with Nextjs 10.1 Following the documentation, my .babelrc file is the following: { "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", …
    alentejo
    • 950
    • 1
    • 4
    • 13
    18
    votes
    1 answer

    How to pass props to a styled component in emotion? Using TypeScript

    I am using styled by emotion at: import styled from '@emotion/styled' I am trying to pass props to a styled component like the guide mentions: https://emotion.sh/docs/styled It doesn't work for some reason. I use TypeScript as well. I pass props…
    Contentop
    • 1,163
    • 3
    • 20
    • 43
    15
    votes
    4 answers

    Module not found: Error: Can't resolve '@emotion/styled/base' when running story book

    I recently installed Storybook to my project Dependencies and Dev Dependencies below: "dependencies": { "@emotion/react": "^11.1.4", "@emotion/styled": "^11.0.0", "@fortawesome/fontawesome-svg-core": "^1.2.34", …
    Seb Orel
    • 171
    • 1
    • 2
    • 5
    15
    votes
    2 answers

    What is the benefit of @emotion/react over @emotion/css for a React project?

    If I install emotion/css then the API is nice and clear: package.json: "dependencies": { "@emotion/css": "^11.1.3", React component: import React from "react"; import { css } from "@emotion/css"; const someStyle = css` display:…
    Evanss
    • 23,390
    • 94
    • 282
    • 505
    15
    votes
    3 answers

    Emotion CSS-in-JS - how to add conditional CSS based on component props?

    I'd like to have a component, styled with Emotion, that takes props that ultimately control the styling. For example, consider a GridCol component that has various props that change the padding and width (the width can be changed across different…
    Zander
    • 2,471
    • 3
    • 31
    • 53
    13
    votes
    3 answers

    How to style body tag with CSS-in-JS approach?

    I am a beginner to CSS-in-JS and emotion, and trying to port a sass react app to emotion. Right from the start I already have the issue of not knowing how to style the body tag. Do people generally use document.body.style to do this? I can't find…
    David Deprost
    • 4,072
    • 1
    • 20
    • 27
    11
    votes
    1 answer

    Component selectors can only be used in conjunction with babel-plugin-emotion error while using emotion

    I have a styled component like export const UL = styled.ul` list-style: none ` export const Nav = styled.nav` ${UL}: { margin-top: 40px; } background-color: #222; padding: 0.35em 1.25em; ` I ran the below command to add…
    iJK
    • 4,655
    • 12
    • 63
    • 95
    1
    2 3
    …
    41 42