How I add custom breakpoint to sx prop?-CodePudding

I'm using materia ui v4 and I want to add custom breakpoint to sx prop. how can i do that? ]

<Box
  sx={{ ...style, width: 1000 }}
>
    <button onClick={() => handleBulkDelete(selectedRows)}>Delete</button>
</Box>

CodePudding user response：

https://v4.mui.com/customization/breakpoints/#custom-breakpoints

Create theme and define your own breakpoints:

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
})

Wrap your newly created theme in your App.js:

<ThemeProvider theme={theme}>
     ...
</ThemeProvider>

You can define breakpoint specific css rules like following:

<Box
    sx={{
        width: {
            xs: "25px",
            sm: "50px",
            md: "100px",
            lg: "500px",
            xl: "1000px"
        },
        backgroundColor: "red"
    }}
>
    Test
</Box>

https://codesandbox.io/s/loving-water-6g7fpx