Stack Overflow
Stack Overflow

Questions tagged [emotion-js]

30 questions
3
votes
1 answer

Emotion styled not overiding component

I am making a site with next.js and @emotion/styled. I have a card component as below. import React from 'react'; import styled from '@emotion/styled'; const Card: React.FC = (props) => { return ( …
kappa
  • 107
  • 1
  • 12
2
votes
1 answer

Setup Stylelint with Emotionjs on a NextJS project

I'm trying to add Stylelint to a brand new NextJS Typescript project with EmotionJS and almost no rules works on my styles files, the only error that I manage to see was Unknown word CssSyntaxError. This Unknown word error happens because I'm using…
Alecell
  • 568
  • 6
  • 19
2
votes
0 answers

Autolabling Materal UI components for easier debugging and testing

In order to the facilitate testing and debugging we'd like to label our custom styled components just like the MUI labels their own internal components. Currently all all custom styled components gets a class on the following format:…
Valleywood
  • 21
  • 1
2
votes
0 answers

How to pass 'nonce' option to the @emotion/cache which is a dependency of @emotion/core?

Using storybook for preact demos and webpack bundles @emotion/core -> @emotion/cache -> @emotion/sheet which is inserting styles to iframe headers causing multiple CSP errors for styles like below …
RS17
  • 773
  • 1
  • 9
  • 23
2
votes
3 answers

@emotion/cache on SSR with Material-UI is always empty

I switched my React SSR from pure @emotion to material-ui 5.0, but the styles won't be extracted anymore. The ID extraction in createExtractCriticalToChunks work well, but the cache.inserted object from emotion is now always an empty object. What…
tfrei
  • 181
  • 1
  • 8
2
votes
1 answer

Export project with Nextjs Tailwind Emotion loses tailwind css styles

I'm starting a new Next.js project that has existing emotion.js styles, now I'm trying to add tailwind, via this instruction https://tailwindcss.com/docs/guides/nextjs Here is my postcss.config.js module.exports = { plugins: { tailwindcss:…
onmyway133
  • 45,645
  • 31
  • 257
  • 263
1
vote
0 answers

Extracting static HTML and CSS from Material-UI components in a TypeScript React app running in a browser environment

I have a TypeScript React application that uses Material-UI (MUI) for styling components. I need to extract the static HTML and CSS for a specific part of the component tree while running the application in a browser environment. I've tried using…
supermodo
  • 675
  • 6
  • 15
1
vote
0 answers

How to implement multiple class selectors like .a.b in Emotion?

I'm migrating some CSS to Emotion, some selectors are like .a.b {...}. What's the best way to use Emotion for this? I've tried css`.${a}.${b}` but it doesn't work :(
slhsxcmy
  • 33
  • 5
1
vote
0 answers

Is there a way to override css style like @include and @mixin of sass in emotion?

In Next.js, I am working on converting CSS from sass and postCSS to emotion. I'm new to Emotion, so I don't know how to modify the Mixin defined in Sass. //common.ts import { css } from "@emotion/react"; export const Pretendard = (props:…
김정수
  • 611
  • 4
  • 9
  • 22
1
vote
0 answers

How do I convert styling from makeStyles to new styled API in MUI 5?

I am trying to convert a MUI 4 component to use the new styled API after migrating to MUI 5 but I’m getting lost on how I can pass specific props to the styled API like I was able to do using makeStyles previously. Can someone help me out…
zeckdude
  • 15,877
  • 43
  • 139
  • 187
1
vote
1 answer

Export TailwindCSS CSS rules to file instead of rendering CSS rules on DOM

On my project I use: TailwindCSS + Emotion + Tailwind Macro. I just want to export TailwindCSS CSS rules to the currently generated styles.css file instead of rendering CSS rules on the DOM (html > head > style[]). That way I would reduce the size…
Viewsonic
  • 827
  • 2
  • 15
  • 34
1
vote
0 answers

Importing MUI5 TextField results in "Object(...) is not a function"

So, I am basically converting a project from: Material-UI 0.19 to MUI 5. babel-core 6.25 to @babel/core 7.16 React 16.3 to React 17.0.2 After installing all the required dependencies (see dependencies below), adjusting the source code to use the…
zai
  • 131
  • 2
  • 6
1
vote
0 answers

Emotion.js test coverage with Jest in React app

we decided to add Emotion in an existed project where we have a rule that we need to have 90% tests coverage for all components. But when we created a few components with @emotion/styled, we see that this affect our coverage because now we have…
Volodymyr Humeniuk
  • 3,411
  • 9
  • 35
  • 70
1
vote
1 answer

Error in emotion/styled package, cannot find answer ANYWHERE

I keep getting the following error, I'm using meteor 2.1 currently Error: A new entrypoint in the @emotion/styled package, @emotion/styled/base, has replaced the @emotion/styled-base package. Please remove this package and use @emotion/styled/base…
Christopher Rehm
  • 35
  • 11
1
vote
1 answer

React emotion styled not working but normal css was working fine for input and label styles

Everything is working except this piece which I have tried many different ways... const HiddenInput = styled.input` display: none; &:checked + CheckboxLabel: { background-color: #866dce; }, ` The checked should change color…
Justin Oberle
  • 502
  • 3
  • 22
1
2