When I put custom breakpoints in Grid Components in typescript, it gives me error?
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
I create some custom breakpoint in material UI. Here I am using material UI latest version. I create my theme by this way-
Sample-
import { createTheme } from '@mui/material/styles';
declare module '@mui/material/styles' {
interface BreakpointOverrides {
xs: true;
sm: true;
msm: true;
lsm: true;
smd: true;
md: true;
lg: true;
xxl: true;
}
}
const theme = createTheme({
breakpoints: {
values: {
xs: 0, // Extra Small Devices ---- Defualt BreakPoints
sm: 480, // Small Devices ---- Default BreakPoints
msm: 576, // Medium Small Medium Devices
lsm: 640, // Large Small Medium Devices
smd: 768, // Small Medium Devices
md: 992, // Medium Devices ---- Default BreakPoints
lg: 1200, // Large Devices ---- Default BreakPoints
xxl: 1536, // Large Devices
},
}
});
export default theme;
Then I am trying to add custom breakpoint in MUI Grid Components-
const Home: NextPage = () => {
return (
<Box>
<Seo />
<Siam />
<Grid container spacing={0}>
<Grid item smd={6}><Movies /></Grid> // In this line I am getting error for adding smd
<Grid item smd={6}><Books /></Grid> // In this line I am getting error for adding smd
</Grid>
</Box>
);
};
export default Home;
Error is-
Property 'smd' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses> | undefined; ... 14 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps & Omit<...>'
Here is image-
Issue Analytics
- State:
- Created a year ago
- Comments:5
Top Results From Across the Web
Custom Breakpoint Not Showing in my breakpoint options
I have the following error while I want to add my custom breakpoint in theme and use it: enter image description here.
Read more >next/image - Next.js
A custom function used to resolve image URLs. A loader is a function returning a URL string for the image, given the following...
Read more >Mantine responsive themes and components - LogRocket Blog
Learn how to build responsive themes and components with Mantine, a flexible and easy-to-use new UI library.
Read more >mjml-guides – Documentation for MJML - The Responsive ...
MJML rolls up all of what Mailjet has learned about HTML email design over the past ... file in the specified path or...
Read more >Ion-Grid: Display Grids to Build Mobile-First Custom App Layout
Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen ......
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
@siamahnaf198 : I don’t understand? What is the solution to this problem?
Try
<Grid item {...{smd: 6}></Grid>