You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This error happens when using the MUI GlobalStyles component on @mui/material=5.10.4. Let me know if I should instead file a bug for the MUI folks, but it seems the root issue is coming from emotion.
When using the content: element(name) CSS property in an EmotionGlobal component, I am getting the error Uncaught Error: You seem to be using a value for 'content' without quotes, try replacing it with 'content: '"element(name)"''
For context, this little used part of CSS is part of the CSS Paged Media standards. The @page rule is defined in the css-page-3 spec, and the content: element(name) rule is defined in css-gcpm-3.
A workaround is to just pass a string to the Global component. This appears to bypass some validation added in this PR: #1435 (comment). This isn't great since we lose type checking and linting, which makes it hard to edit the CSS.
Would be great to remove that check or perhaps change it to accept an element() function as well. Environment information:
react version:
@emotion/react version:
The text was updated successfully, but these errors were encountered:
Current behavior:
This error happens when using the MUI
GlobalStyles
component on@mui/material=5.10.4
. Let me know if I should instead file a bug for the MUI folks, but it seems the root issue is coming from emotion.When using the
content: element(name)
CSS property in anEmotionGlobal
component, I am getting the errorUncaught Error: You seem to be using a value for 'content' without quotes, try replacing it with 'content: '"element(name)"''
To reproduce:
Example: https://codesandbox.io/s/emotion-issue-template-forked-sqqrsw?file=/src/App.tsx
Global
component to try and render the following:Expected behavior:
For context, this little used part of CSS is part of the CSS Paged Media standards. The
@page
rule is defined in the css-page-3 spec, and thecontent: element(name)
rule is defined in css-gcpm-3.A workaround is to just pass a string to the
Global
component. This appears to bypass some validation added in this PR: #1435 (comment). This isn't great since we lose type checking and linting, which makes it hard to edit the CSS.Would be great to remove that check or perhaps change it to accept an
element()
function as well.Environment information:
react
version:@emotion/react
version:The text was updated successfully, but these errors were encountered: