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.
619
questions
-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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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("...
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/...
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....
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)};
\`;
...
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 ...
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 ...
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 ...
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 ...
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....
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 ...
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&...
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";
...
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 ...
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", ...
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 ...
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 ..." ...
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 ...
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 ...
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....
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,...
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&...
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',...
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) ...
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",
"@...
-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 ...
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 ...
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 ...
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 { ...
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',
...
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 ...
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 ...
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 ...
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,
...
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 ...
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 - ...
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 ...
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 ...
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 ...
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": {
[`${...
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 ...
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
...
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 ...
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 ...