Questions tagged [emotion-js]
30 questions
0
votes
0 answers
How to avoid using the CSS !important Rule here in my code?
I am trying to give color on hover to the anchor tag it is not working, When I give !important then the style gets applied. I am using emotion JS where I am exporting the file and importing that style in the component, The solution I need is to…
ali
- 492
- 2
- 7
- 18
0
votes
1 answer
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",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
Its compiling client after npm start…
meez
- 3,783
- 5
- 37
- 91
0
votes
1 answer
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:
Ts1
- 51
- 2
0
votes
1 answer
Catching GTM tags when using react styled component
We are using React styled components in our project, so there is an issue where the class name is variable when the GTM manager catches the selector of a specific element.
To solve this, I think of a way to give an id value to the element to be…
knwlSeeker
- 21
- 4
0
votes
1 answer
Using CSP Header on MUI with React
I have a React App using creact-react-app and Material-UI.
I'm trying to enable CSP headers for my react web app inside AWS CloudFront.
I dont know why, but I keep getting these empty inline "data-emotion" style tags ..
I've set the .env as…
Lizzal
- 89
- 8
0
votes
0 answers
TypeScript issue when using as prop from Emotion js in React app
I am using Emotion js and styled (Styled component) in my React and TypeScript project.
const MyButton = styled.buttoncolor: red;;
export default MyButton;
I need to use above styled component as a button but also as an anchor link.
I used as prop…
meez
- 3,783
- 5
- 37
- 91
0
votes
0 answers
How to style @mui/material components with classes property using @emotion/react
I want to provide class names to a material ui component that has a classes prop using @emotion/react and I can't see a way of doing it. Here is the code example:
const MyComponent = () => {
const classes = useMemo
Anupheaus
- 3,383
- 2
- 24
- 30
0
votes
0 answers
Functions that are interpolated in css calls will be stringified
I have this code and I have this error message and whatever I change made, error doesn't go away.
const track = css`
background: ${({ theme }) => rgba(theme.colors.gray['000'], 0.25)};
`
Functions that are interpolated in css calls will be…
SkyDev
- 115
- 1
- 9
0
votes
2 answers
Module not found: Can't resolve '@emotion/react' in node_modules\@emotion\styled\base\dist'
I tried the npm install @emotion/react and npm install @emotion/styled solutions and the error is not cleared.
Kindly help
"dependencies": {
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.12.3",
"@mui/material": "^5.1.0",
…
Njeri Muriithi
- 1
- 1
- 1
0
votes
1 answer
Styles not applying on first client render (nor after) when browser styles different from server in nextjs with emotion styled components
Current behavior:
When there is a style that is conditionally applied on the browser, the styles from the server are not changed even though the component runs and the browser props are passed in Correctly. The html sent back from the server stays…
Brendan Morrell
- 21
- 5
0
votes
1 answer
How prevent a HTML section tag from scrolling while autocomplete popper is open
I am using Material ui autocomplete in my React app.
With the PopperComponent prop and some custom css styling I made the popper full-width and fill the height of the screen on mobile.
How do I prevent the a certain HTML tag from scrolling…
meez
- 3,783
- 5
- 37
- 91
0
votes
0 answers
How can pass ref property to component in emotion js?
I'm using emotionJs for styled component in my project , I want to pass ref property to my emotion styled component , how can I do that?
import styled from '@emotion/styled';
const Page = styled.section(({ theme, color = 'paper' }) =>…
N.SH
- 616
- 7
- 20
0
votes
1 answer
Stringify emotion js css results
I have found that the emotion.js will create and append new style every time the styled props changes, this has a performance cost, especially when variable changes rapidly like when dragging an element.
One way to prevent emotion.js from creating…
cyrus-d
- 749
- 1
- 12
- 29
0
votes
1 answer
How to check a prop to output a block of code on a styled object in Emotion
What is the best practice to output a block of code on a styled object in Emotion?
A simple boolean statement looks like this:
const StyledComponent = styled('div')(({ check }) => ({
position: check ? 'relative' : undefined
})
But what is the…
Mark Nunes
- 827
- 10
- 23
0
votes
2 answers
Can't use props for styled components with emotion-js and typescript
Here's my very simple component:
import React, { ReactChild, ElementType } from 'react'
import styled from '@emotion/styled'
type WrapperPropsType = {
size?: SizeType
}
type ButtonPropsType = {
as?: ElementType,
size?: SizeType,
…
Volodymyr Humeniuk
- 3,411
- 9
- 35
- 70