Using a styled(Grid) results in an error from 'RegularBreakpoints'
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
import { styled, Grid } from '@mui/material';
export const StyledGrid = styled(Grid)(({ theme }) => ({}));
Doing the above is resulting in the following error
Exported variable 'StyledGrid' has or is using name 'RegularBreakpoints' from external module "{project_path}/node_modules/@mui/material/Grid/Grid" but cannot be named.
Expected behavior 🤔
If I export RegularBreakpoints
the error goes away so I’d expect that or a similar solution.
Steps to reproduce 🕹
Steps:
- Create a project with 5.8.4 of
@mui/material
- Create a file in the project that has the following code:
import { styled, Grid } from '@mui/material';
export const StyledGrid = styled(Grid)(({ theme }) => ({}));
Context 🔦
No response
Your environment 🌎
.tsconfig
{
"compilerOptions": {
"target": "ES2015",
"outDir": "./dist/esm/",
"strictNullChecks": true,
"moduleResolution": "node",
"allowJs": true,
"strict": true,
"esModuleInterop": true,
"jsx": "react",
"baseUrl": "./src",
"lib": ["es2015", "dom.iterable", "es2016.array.include", "es2017.object", "dom", "esnext"],
"module": "ESNext",
"removeComments": true,
"alwaysStrict": true,
"allowUnreachableCode": false,
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"sourceMap": true,
"declaration": true,
"declarationDir": "./dist/typings/",
"downlevelIteration": true,
"typeRoots": ["./src/typings", "./node_modules/@types", "../../node_modules/@types"],
"types": ["jest", "node"],
"skipLibCheck": true
},
"files": ["./src/index.tsx"],
"include": ["./src/**/*"]
}
Issue Analytics
- State:
- Created a year ago
- Reactions:4
- Comments:15 (9 by maintainers)
Top Results From Across the Web
TS4023: Exported Variable <x> has or is using name <y> from ...
The compiler is failing to figure out the exact shape of detailRoute , because it does not know the shape of Route ....
Read more >Guide to the MUI grid system - LogRocket Blog
MUI enables you to create innovative and responsive layouts. Explore the MUI Grid system and the new features expected with MUI Grid v2....
Read more >grid-auto-flow - CSS: Cascading Style Sheets - MDN Web Docs
The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into ...
Read more >Using Grids - Oracle Help Center
Note: A specific type of grid called an analytic grid can be used exclusively for applications built for the PeopleSoft Analytic Calculation Engine....
Read more >An Auto-Filling CSS Grid With Max Columns of a Minimum Size
Here's how the resulting auto-filling CSS grid behaves when it is ... Looking at the source, it's almost the same, with the exception...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@rejetto is exactly right. You will not see this error if you don’t also update your
tsconfig.json
to have"declaration": true
All that would need to be done to address this issue would be
export interface RegularBreakpoints
I’ve created a PR for it - #33751