627 questions
-2
votes
0
answers
140
views
Why do I have an error for the @emotion/react package even though the package versions match?
I am using React JS and Next JS to create a website. Currently, I have this in my terminal when I try to do npm install.
npm error While resolving: [email protected]
npm error Found: [email protected]...
- 867
0
votes
0
answers
18
views
CreateCache @emotion/cache Failed to execute 'insertBefore' on 'Node':
I'm only getting this error in production
Does anyone know why? I'm trying to put a component inside an iframe
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new ...
-1
votes
0
answers
19
views
EmotionCSS clean up generated classes
When using the css prop from EmotionCSS, it generates a CSS class with a random hash name and adds it to the head of the DOM (as far as I can see) as well as various variants for browser compatibility....
0
votes
0
answers
36
views
Determine when Parent is Flex or Grid to specify the typescript types autosuggestion
I am using @emotion/styled and I've encountered an issue I cannot resolve. I have two styled components, <Flex> and <Grid>.
What I'm trying to achieve is for <Flex> to detect whether ...
0
votes
0
answers
26
views
Emotion Analysis with bhadresh-savani/bert-base-uncased-emotion
Hope I can get some help here please!
I am trying to run an emotion analysis model from Hugging Face rep. (bhadresh-savani/bert-base-uncased-emotion) and I am struggling with the model run as it's ...
0
votes
0
answers
34
views
How to prevent MaterialUI react components from injecting <style> tags into the <head> tag
I recently added MaterialUI to my react project and I'm seeing a bunch of tags showing up in the tag and it's causing problems with my content security policy.
- 179
2
votes
1
answer
123
views
Classname does not match in Vitest snapshot
We have a Vitest setup for Vite-based React project using MUI.
When we create a snapshot of a component, the class part will have hashed classnames like the following:
<div class="...
- 407
0
votes
1
answer
53
views
CSS transition is not working on emotion styled component
I have a problem with css transition.
When the selected state value changes, the CSS width changes. I want to apply a transition effect to the width, but if I use a styled component, the transition ...
0
votes
1
answer
74
views
How to override default styles in Material UI v5 compared to v4?
In Material UI v4, I used makeStyles and withStyles from @mui/styles to override the default styles for components, which was a straightforward approach to customize the look and feel of my ...
- 35
0
votes
0
answers
43
views
How to use css grayscale() in emotion/styled?
I use react-leaflet to show map. I wanted to make a openstreetmap with grayscale. This answer shows I should use css grayscale function https://github.com/PaulLeCam/react-leaflet/issues/143#...
- 1,086
2
votes
2
answers
285
views
Inline stylesheets not reflected applied by emotion(mui) in Next.js project only in Chrome
Classes from Inline stylesheets generated by emotion(MUI) are not getting applied. Facing issue only in latest Chrome (v129) working for other browsers and even for Chrome (version <=128).
I have ...
- 23
0
votes
0
answers
34
views
Issue running tests with Enzyme, React 16, and Emotion 11.x
I am working on a React 16.8.x application and am in the process of updating to emotion 11.13.x. I also use Enzume v3.x and the react 16 adapter for it.
In my typical component I use the css={{}} ...
- 1,869
0
votes
1
answer
86
views
Unable to find out the types needed to add to parameter of custom function
I'm using tss-react and MUI package and I'm unable to figure what to set the types for custom function I've written which basically merges all my common styles and the specific styles I want for a ...
- 326
0
votes
0
answers
24
views
Unable to resolve jsx-dev-runtime when running emotion js with vite
I am developing a react web app using vite with typescript and I would like to use emotion.js as the styling libray but no luck getting it to work. I follow the official guide here and also this blog. ...
0
votes
0
answers
21
views
Unknown class from MUI
I am writing styles to the MUI`s component, and want to get rid of additional class, but idk how to do it. It is looking like this: "css-10jgzd0-MuiToolbar-root", I want to delete MuiToolbar-...
- 1
0
votes
0
answers
52
views
CSS linear-easing-function bug
Edit: add full html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" ...
- 33
0
votes
0
answers
17
views
MUI 5 + Emotion styled not reading secondary color only
I have an app with Mui 5.8.1
I'm also using emotion styled library.
I followed guide to typescript and I've set up some custom colors with custom shades:
import { PaletteColor, Theme as MuiTheme } ...
- 464
0
votes
1
answer
146
views
How to select hardcoded CSS class with Vanilla Extract?
I’m migrating from Emotion to Vanilla Extract. I have a component which contains a third-party UI library component. This third-party component has a hardcoded class .ClassWhichICannotChange.
In ...
- 1,598
0
votes
0
answers
135
views
Twin.macro not making use of SSR with Next.JS 14
I'm using Twin.macro with Next.JS 14, NX and emotion. I've followed the example of Twin.macro and either I keep running into errors as v8 doesn't exist or Twin.macro is executed at run time
What am I ...
- 1,015
0
votes
0
answers
48
views
How to Use Theme Provider When Using CSS Method in Emotion/React
const headerStyle = css`
margin: ${({theme}) => theme.????}
`;
const Header = styled.header<{ isActive: boolean }>`
max-width: ${({ theme }) => theme.sizes.mobile};
margin: 0 auto;
...
- 678
0
votes
0
answers
33
views
Is it possible to prevent Material UI from passing certain props to DOM in the ThemeOptions?
We have a UI library for our company filled with (styling) customisations on the Material UI components.
Currently I'm trying to move styling specific logic from custom styled components to the actual ...
3
votes
0
answers
298
views
Cannot access 'React' before initialization while using rollup manualChunks with vitejs?
I'm using vitejs for bundling.
This is the manualChunks part of rollupOptions in my vite.config.js:
{
output : {
if( id.includes( 'node_modules/react/' ) || id.includes( '/node_modules/react-dom'...
- 1,050
3
votes
1
answer
1k
views
How to use material-ui styled components inside Next.js server components
I'm using Next.js version 14 with app router alongside with Material-UI v5.
Whenever I'm rendering Material-UI components in server pages components It's working just fine. The issue starts when I'm ...
- 1,145
0
votes
1
answer
83
views
Mui styled components are not getting registered with React-hook-form
If i register username and password without mui styled components. it works
//This works fine
<TextField
id="username"
type="text"
...
- 1,855
0
votes
1
answer
368
views
CircularProgress TypeError: Cannot read properties of undefined (reading 'main')
I am new to React and Next.js, whilst trying to upgrade from Node V16 to Node V18. One of the changes was to MUI from v4 to v5, currently using the packages:
"@emotion/babel-plugin": "^...
0
votes
1
answer
293
views
Issue with Metadata Changes in Next.js: Metadata Overwritten After .next Folder Rebuild
I'm encountering an issue with metadata customization in my Next.js application. Although I'm able to successfully modify the metadata in my layout.tsx file, the changes are not reflecting in the ...
2
votes
0
answers
130
views
Next js delay before applying Emotion and MUI styles
I'm using emotion/react: ^11.10.5, mui/material: ^5.11.0 and Next.js v13.1.2;
And I've used MUI sx and Emotion/React css to style my react components,
also most of the pages are SSR.
Problem is that ...
- 147
0
votes
0
answers
14
views
Want to change Emotion styled functions based on routing or component rendered
I need to change the background color of the Homepage component that is nested in the FlexContainer styled component. Because of this I also want to change the FlexContainer background color, but only ...
- 1
0
votes
0
answers
114
views
How to use component prop with custom components based on Material UI (with emotion)?
I am currently using a solution from the Storybook team to use an alternative to attrs() function from styled-components with Emotion.
This also works very well:
export const Paragraph = styled((...
- 523
0
votes
1
answer
63
views
Animation not happening In React Component
I am trying to achieve animation in a react app. The styles are getting imported from .js file (CSS in JS?). And those styles are getting applied except for the animation. The animation isn't working.
...
- 333
0
votes
1
answer
484
views
Prevent Emotion style injection
I am using the JsonForms React Component to dynamically generate an HTML form in my web-application. The framework I use does all of the view rendering on the server side, so to include this component ...
- 31
1
vote
0
answers
78
views
TypeScript 4 / React 18: Generating A JSON Object Of CSS Classes
I have a Location component that generates a JSON object of CSS classes using useStyles, a function that is returned by makeStyles, a function from @mui/styles. A CSS class that is a value of the JSON ...
- 435
1
vote
0
answers
140
views
Typescript error for emotion styled component with forwardRef
I have an issue with typescript when I want to use a styled component with a forwardRef that I don't know how to solve.
The only solution I have so far is using typecasting. I am not a fan of that ...
6
votes
0
answers
1k
views
integrating emotion/css with nextjs app router
I have been using emotion/css for my project and want to migrate to nextjs app router but have some questions regarding emotion/css server side rendering with app router.
Nextjs documentation states ...
- 61
1
vote
0
answers
145
views
Emotion css hover over parent and target inner element
I have the following code using Emotion:
const styles = {
container: css({
display: "flex",
justifyContent: "center",
alignItems: "center",
...
- 8,891
0
votes
1
answer
233
views
Error while testing a component in next using emotion/styled with jest and react testing library
I am testing a component that has the following code and uses @emotion/styled:
import styled from "@emotion/styled";
const StyledNavBar = styled.div`
position: fixed;
top: 0;
width: ...
- 436
0
votes
0
answers
568
views
Issue with MaterialUI Styles Mounting Incorrectly in Shadow DOM with Vite
I'm encountering an issue with the mounting of MaterialUI styles within the shadow DOM when using Vite as a bundler. I've followed the steps outlined in the MaterialUI documentation (https://mui.com/...
- 1
-1
votes
1
answer
84
views
@import not showing Fontawesome icons in CSS-in-JS
This was how I was importing Fontawesome icons:
src/App.css
@import "@fortawesome/fontawesome-free/css/all.css";`
When I moved that @import to CSS-in-Js (emotion):
src/App.js
// JS:
const ...
- 55.2k
0
votes
2
answers
624
views
unhandledrejection typeerror: cannot read properties of undefined (reading '__emotion_real')
I got an error while building next js application : unhandledrejection typeerror: cannot read properties of undefined (reading '__emotion_real')
this happened after I updated the next js and emotion ...
0
votes
0
answers
108
views
React Mui "Converting circular structure to JSON" error
I'm having "Converting circular structure to JSON" error in my app. Couldn't find any solution. It happens when clicking any button (or any "clickable" element) from Mui. It ...
2
votes
1
answer
1k
views
Migrating from CRA to Vite: Unable to determine current node version
Migrating from CRA to Vite for a react project. Vite builds ok but displays a blank page after build. There's a console error:
@emotion_styled_macro.js:32600 Uncaught TypeError: Unable to determine ...
- 31
0
votes
1
answer
333
views
How to correctly infer type for tss-react withParams and create
Hi everyone and thank you in advance for your kind help. I'd like to use tss-react lib for styling, cause I will use Material UI components. I'm reading some docs and the modern api approach suggests ...
4
votes
1
answer
413
views
Configuring MUI Components selector API with Babel in Meteor "TypeError: Cannot read property 'id' of null" on project start
I have a Meteor React project, for which I have added Material UI v5 (installation instructions), which comes with Emotion for CSS-in-JS styling:
$ meteor create --react meteor-react-mui
Created a new ...
- 52.8k
1
vote
1
answer
123
views
Why rules inserted in an empty style tag using insertRule get removed on resetting textContent?
var styletag = document.createElement("style");
document.head.appendChild(styletag);
styletag.appendChild(document.createTextNode('')); // This is needed to replicate issue
styletag.sheet.insertRule("...
- 162
0
votes
1
answer
98
views
Material UI ES6 Custom Styled Text Field cursor loses focus with onChange event
I am facing issue when customizing MUI component with styled library. The text field loses focus on typing my character in it. It works fine if I am using inline sx based styling. Perhaps I am calling ...
- 15
2
votes
2
answers
737
views
How to use custom properties from MUI theme object with custom props in emotion styled components?
I have added a custom object named fTokens to the MUI theme via Module augmentation in TypeScript
This is how my theme.d.ts looks like
declare module "@mui/material/styles" {
interface ...
- 397
1
vote
0
answers
249
views
SSR classNames issue with React, Express and ChakraUI components
I have a simple project where I am exposing the built FE project (which has React and ChakraUI) through an express server. Things go well until I import a Box component from chakra. It gets rendered ...
- 111
2
votes
1
answer
1k
views
Emotion css props are not getting the theme object when running tests with vitest
Context: I am migrating a project over from CRA to the Vite ecosystem and I am having some issues with the tests. I did not have this problem when these tests were run with Jest in the CRA environment....
- 9,348
2
votes
1
answer
552
views
toHaveStyleRule cant find style defined by parent
I'm writing some tests for my component and have this test that works fine:
test('should add padding', () => {
const element = renderWithTheme(
<List p={2}>
<ListItem&...
- 2,251
1
vote
0
answers
763
views
MUI V5 use Emotion or CSS Modules
I'm working on creating a shared library in React and I'm pretty new to React language and a little confused about what CSS pattern should i use.
Looking at MUI site, on V5 they suggest to use Emotion ...
- 23