[styled-engine-sc] TS error when using a `css`-variable within `styled`
Open
@siriwatknp is already working on this.
Since Dec 8, 2023.
customization: css
customization: theme
scope: system
typescript
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/p/devbox/mui-theme-scoping-within-css-and-css-within-styled-knpr8m?file=%2Fsrc%2FApp.tsx
Steps:
- Open the provided link
Current behavior 😯
- TS throws error when using a
css-variable withinstyled:Property 'variants' is missing in type 'Interpolation<object>[]' but required in type 'CSSObjectWithVariants<any>'. - We have to use
THEME_IDto access the MUI theme
Expected behavior 🤔
- It must be possible to use a
css-variable withinstyled, without getting a TS error. - Theme scoping should work fine, also within
css. There should be no need to use theTHEME_IDvariable
Context 🔦
We try to use MUI with theme scoping with styled-components v6.
Your environment 🌎
npx @mui/envinfo
Used Browser: Chrome
System:
OS: macOS 12.6.1
Binaries:
Node: 16.20.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.4 - /usr/local/bin/npm
Browsers:
Chrome: 119.0.6045.199
Edge: Not Found
Safari: 15.6.1
npmPackages:
@mui/base: 5.0.0-beta.25
@mui/core-downloads-tracker: 5.14.19
@mui/material: 5.14.19 => 5.14.19
@mui/private-theming: 5.14.19
@mui/styled-engine: 5.14.19
@mui/styled-engine-sc: 6.0.0-alpha.7 => 6.0.0-alpha.7
@mui/system: 5.14.19
@mui/types: 7.2.10
@mui/utils: 5.14.19
@types/react: 17.0.70 => 17.0.70
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
styled-components: 6.1.0 => 6.1.0
typescript: 4.8.4 => 4.8.4
Support Key
#80425
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.