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

393 questions
27
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
  • 345
  • 1
  • 4
  • 11
24
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
  • 712
  • 2
  • 6
  • 17
21
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
  • 2,776
  • 2
  • 19
  • 38
20
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,550
  • 1
  • 15
  • 24
15
votes
2 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
  • 185
  • 2
  • 7
14
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
  • 1,324
  • 12
  • 23
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
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
  • 25,398
  • 36
  • 107
  • 160
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
  • 821
  • 11
  • 19
8
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
  • 1,324
  • 12
  • 23
8
votes
2 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 css``…
Peter
  • 1,166
  • 13
  • 29
8
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
  • 1,725
  • 2
  • 23
  • 46
7
votes
1 answer

React testing library not rendering Emotion CSS

Running React Testing Library to generate snapshots on JSX which uses the Emotion css prop results in no CSS being rendered. I have tried using the "@emotion/jest/serializer" but still no luck. Component:
7
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
  • 889
  • 1
  • 11
  • 32
6
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,187
  • 10
  • 56
  • 87
1
2 3
…
26 27