我正在使用 materia ui v4，我想將自定義斷點添加到 sx 道具。我怎樣才能做到這一點？]
<Box
sx={{ ...style, width: 1000 }}
>
<button onClick={() => handleBulkDelete(selectedRows)}>Delete</button>
</Box>
uj5u.com熱心網友回復：
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482153.html