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.

Filter by
Sorted by
Tagged with
-1 votes
1 answer
15 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 ...
wyc's user avatar
  • 53.8k
0 votes
2 answers
55 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 ...
Maxim Shkividorov's user avatar
0 votes
0 answers
19 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 ...
plurandfun's user avatar
0 votes
1 answer
106 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 ...
flag's user avatar
  • 11
0 votes
0 answers
25 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 ...
Alessio Punturo's user avatar
3 votes
1 answer
163 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 ...
ghybs's user avatar
  • 48.7k
0 votes
0 answers
19 views

Next.js environment setting for emotion/react and TailwindCSS

I'm trying to use emotion/react and TailwindCss in my projects. But I got stuck. Of course, If I add /** @jsxImportSource @emotion/react */ to every component, I'm able to use both libraries, but I ...
Spencer.sungjin Kwon's user avatar
1 vote
1 answer
80 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("...
Kritidipto Ghosh's user avatar
0 votes
0 answers
36 views

React Element type not working with @emotion/react jsxImportSource

According to the docs on emotionJS, it is required to add this to your tsconfig in order to use @emotion/styled "jsx": "react-jsx", "jsxImportSource": "@emotion/...
Victor Evogor's user avatar
0 votes
0 answers
40 views

Vite Uncaught TypeError when using Library that requires @emotion/styled

I am currently using Vite to run some micro frontends; I am using the following versions required to use material-react-table (1.15.1 latest stable version) : "@emotion/react": "^11.11....
CmchPt's user avatar
  • 41
0 votes
1 answer
23 views

MUI use styled and component prop in one component

I use emotion for custom css for my mui component. const StyledContainer = styled(Container)` display: flex; flex-direction: column; margin-top: ${props => props.theme.spacing(2)}; \`; ...
Nazar Fedishin's user avatar
0 votes
0 answers
37 views

How to change the style precedence from incoming non-emotion css in emotion/react

I'm creating a package using @emotion/react as its CSS styling library and will be given to people who may not use the styling library. As described per their documentation incoming non-emotion ...
Benji's user avatar
  • 57
0 votes
1 answer
22 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 ...
Yusuf Mirza's user avatar
2 votes
2 answers
108 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 ...
KshitijV97's user avatar
1 vote
0 answers
79 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 ...
NyxNight's user avatar
  • 111
1 vote
1 answer
179 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....
Dimitris Karagiannis's user avatar
0 votes
0 answers
75 views

Material UI CSS injection order

I want the order of my styles to be... Styles from the <CssBaseline> component. Styles generated by Emotion that Material UI produces. My own custom stylesheet. Here's a simplified version of ...
Kyle's user avatar
  • 49
2 votes
1 answer
89 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&...
PEPEGA's user avatar
  • 2,224
0 votes
0 answers
39 views

How to use a theme in dynamic styles with Emotion like CSSProp in styled-components

I just moved from styled-components to emotion. In styled-components, I use 'CSSProp' to use the theme in dynamic styles like this : import styled, { CSSProp, css } from "styled-components"; ...
aryang's user avatar
  • 73
1 vote
0 answers
257 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 ...
Itzik's user avatar
  • 23
3 votes
0 answers
137 views

Errors Type 'Interpolation' is not assignable to type 'InterpolationWithTheme<any>' of emotion and Twilio, dependencies clashing

I have been using "@emotion/styled": "11.10.5", and didn't have any problem, but since I started using the Twilio library "@twilio/flex-webchat-ui": "^2.9.1", ...
carlitos_alcaraz's user avatar
0 votes
0 answers
87 views

Auto-fold multi-line css in React

Extensions like Tailwind Fold automatically fold inline css to improve readability, but they only apply to single-liners. I use libraries like emotion or styled-components to write multi-line css. I ...
pinkboid's user avatar
  • 103
2 votes
0 answers
212 views

You are loading @emotion/react when it is already loaded

I feel like I've tried everything here, but any help would be great to solve this issue. I have a component I've published, and i cannot resolve the "You are loading @emotion/react ..." ...
Shannon Hochkins's user avatar
0 votes
0 answers
17 views

Styled component with conditional tag

I am wondering if there is a solution for the following case. I have a nice button with an icon and lots of styles in the design system. Multiple designers use it to move user to another screen, so ...
Анна's user avatar
0 votes
0 answers
20 views

Fonts in Chakra-ui theme not assigned in the configuration

I know there are similar questions already made before, but nothing really helped me in this. I'm writing an open source app called Cocoso, and have been using Chakra-UI already for 2 years and I love ...
Emo's user avatar
  • 592
0 votes
1 answer
43 views

React application Cannot find module '...\@emotion\css'

I have a react application, (implements SSR with a Node backend). The application uses material ui and I have installed all the required @emotion packages per documentation. See my package.json below....
j-terranova's user avatar
1 vote
1 answer
33 views

In React development, compile and vscode lint settings do not match

We are doing front-end development using TypeScript and React. We are implementing nx as project management and creating the above front part as one project. I have installed @emotion/react as styling,...
konp's user avatar
  • 11
1 vote
0 answers
96 views

Get storybook to read global variable

I'm playing with storybook and emotion: I set some global css variable like this so that I can switch colors when I want different themes import { themeSpliceType } from "../feature/themeSlice&...
Link Lin's user avatar
0 votes
0 answers
105 views

Hover and Focus privilege in Emotion-styled in React

import styled from '@emotion/styled'; export const StyledTextField = styled(TextField)(({ error }) => ({ '.MuiInputBase-root': { height: '100%', borderRadius: '4px', boxShadow: 'none',...
Logres's user avatar
  • 1
0 votes
0 answers
71 views

Error with component selectors when using transpiled npm package with Emotion in a different repository

In repository application (A), the Emotion module is not directly used in the component. Instead, it is imported through a different folder structure. Here's an example: // Repository application (A) ...
trafish scott's user avatar
0 votes
1 answer
1k views

How to configure Emotion js with Vite 4 in React TypeScript project

I am migrating from Webpack to Vite in my React Typescript app. I try to get Emotion js to work. "@vitejs/plugin-react": "^4.0.1", "vite": "^4.3.9", "@...
meez's user avatar
  • 4,025
-2 votes
1 answer
234 views

pip dependency conflict_ cannot install tweetnlp

I tried to install tweetnlp package from here to analyze emotions of some social media text. However, I get the following error when I run pip install tweetnlp: ERROR: pip's dependency resolver does ...
mOna's user avatar
  • 2,361
0 votes
0 answers
43 views

Unable to properly set a div max height

I am developing an app with React and JavaScript that aims to present to the users a fully-featured studio for editing packs for a video game. The layout main layout of the app must be designed so it ...
Osaxely's user avatar
  • 66
2 votes
1 answer
139 views

Uncaught TypeError generated for proxy on production build

I wanted to alter MUI's styled function a little bit, so I created the following proxy for it: import * as muiSystem from '@mui/system'; type CreateMUIStyled = typeof muiSystem.styled; type ...
Mister Epic's user avatar
  • 16.4k
2 votes
1 answer
2k views

How do I use Material UI with the Next.js app router? [duplicate]

I just used npx create-next-app to create a Next.js v13 typescript app. I've removed all the example css and html and am trying to introduce Material UI. My app/layout.tsx looks like this: import { ...
bluefeet's user avatar
  • 391
0 votes
1 answer
388 views

How can I use the css prop in @emotion/react without importing /** @jsxImportSource @emotion/react */ in every file?

I want to use the @emotion/react library so that I can use the css prop like in this example: <div css={{ backgroundColor: 'pink', ...
Ts1's user avatar
  • 61
0 votes
1 answer
136 views

how pass class to element out of Dom (portal )with styled in mui/material/styles?

this link show how you can style portals in material https://mui.com/material-ui/guides/interoperability/#portals but this is about tooltip I wanted to do it with modal or select , ... and i tried ...
Negar's user avatar
  • 1
0 votes
0 answers
56 views

React & Bootstrap Classes & Styled Components

I want to be able to use Bootstrap's awesome utility classes like "d-flex", "btn-primary", "text-center", etc. together with Styled Components. Ideally do something like ...
dvdbrk's user avatar
  • 161
0 votes
0 answers
95 views

TypeError: __webpack_require__.i(...) is not a function: given when trying to use Material UI in React project?

Error Message I receive the following error message when using npm start on my project. Only started occurring aftering installing Material UI and Emotion, it is fixed if I don't import any packages ...
benh22's user avatar
  • 1
1 vote
1 answer
680 views

Emotion CSS prop doesn't work in Storybook v7

After an upgrade of the storybook from v.6.5 to v7 the Emotion stopped working. After many unsuccessful tries, I have no idea where the problem could be. button.stories.tsx: import { Meta, StoryObj, ...
Kremdas's user avatar
  • 80
1 vote
0 answers
39 views

The element overlaps the modal

I am creating a memo game in React. After all the cards are paired, a pop-up is displayed. However, for some reason, in mobile browsers three cards (each of them being the first card at the new CSS ...
ReanuKeeves's user avatar
0 votes
1 answer
156 views

How to target with styling table row :last-child in Full Calendar library

I'm using Full Calendar library and I have the situation that evens with longer names don't fit content of the single day field. To see full event name I solved it that for first six columns : Nie - ...
marcinb1986's user avatar
0 votes
0 answers
23 views

emotion react class concatenation

How to resolve problem with class concatenation? Expected Result All divs have outline. First div has red outline. Second, and third have blue outline. Current Result All divs have outline. First, and ...
Kirill Skomarovskiy's user avatar
0 votes
1 answer
75 views

Module not found: can't resolve @emotion/react/

I'm learning MERN stack project where I've proxy the frontend to backend on localhost. Everything works fine until I stop the react application to install some modules and then, on hitting the npm ...
Swaraj's user avatar
  • 27
0 votes
0 answers
17 views

When display:flex, flex-direction:column is applied to the parent element, the height of the child element with position:relative becomes 0

For vertical alignment, display:flex and flex-direction:column were applied, but when the child elements exceed the modal height of 40rem, the height of the ImageWrapper is adjusted to 0 even if ...
김완영's user avatar
2 votes
2 answers
836 views

How to refer to other Styled Components when using MUI styled function and Styled Components?

How should I refer to other Styled Components when using MUI styled function and Styled Components? This is the intended syntax: const Parent = styled('div')({ "&:hover": { [`${...
maja's user avatar
  • 719
0 votes
0 answers
127 views

Impact of MUI v5's sx={{...}} props on React App Performance?

I am utilizing Material UI's "sx={{ }}" props to style the components of my React application, which has resulted in a large number of style elements being added to the head section. As my ...
abrar zahid's user avatar
1 vote
0 answers
67 views

How to change width and other classes in react-datePicker using react-emotion

I'm using react-datePicker and I want to style container and few other classes using emotion-react. Can You please suggest how should I properly do it ? My datePicker looks like this: <DatePicker ...
marcinb1986's user avatar
0 votes
0 answers
63 views

Change Keras Distiller() class so that the student and teacher model can have two different inputs

I am doing my Master's thesis in Multimodal Emotion Recognition, more precisely, I want to apply knowledge distillation from a multimodal teacher model to an unimodal student model. I am using Keras ...
rodrigo.cgcdl's user avatar
0 votes
1 answer
515 views

Is there a way to get css attribute from passed css object inside styled component?

Is there a way to get css attribute from passed css object inside styled component? Works correctly if I do in this way. const SquareWithProp = styled.div<{ size: number; }>` height: ${props ...
Artem Isachenkov's user avatar

1
2 3 4 5
13