如何将自定义断点添加到 sx 道具？

Question

我正在使用 materia ui v4，我想向 sx prop 添加自定义断点。我怎样才能做到这一点？ ]

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

Answer 1

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

创建主题并定义您自己的断点：

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

将新创建的主题包装在 App.js:

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

您可以定义断点特定的 css 规则，如下所示：

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

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

如何将自定义断点添加到 sx 道具？

How I add custom breakpoint to sx prop?

reactjs

material-ui