小编Pix*_*xel的帖子

将 muiTheme 与 Material-ui 结合使用时,如何根据自定义断点调整容器的 maxWidth

我正在尝试使用 createMuiTheme 并调整我创建的不同断点的 maxWidth 。现在我已经设置了以下断点值:

import { Container as Container_, Grid } from '@material-ui/core'
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"


const breakPointValues = {
    xs: 0,
    sm: 768,
    md: 1025,
    lg: 1280,
    xl: 1360,
}
Run Code Online (Sandbox Code Playgroud)

然后我用这些断点创建一个主题。

const theme = createMuiTheme({
    breakpoints: { values: breakPointValues },

    overrides: ({
        MuiContainer: ({
            root: {

            },
            maxWidthXl: //????
        })
    })
})
Run Code Online (Sandbox Code Playgroud)

我需要将 maxWidth 调整为给出的标准以外的值。例如,我需要为每个大于 1279px 的视口设置 maxWidth --> 对于 Large 和 xlarge 也是如此。

应该可以使用 maxWidthXl,但找不到如何编写代码的示例,因为类型不是字符串。

顺便说一句,我正在使用打字稿,我收到的错误如下所示。

Type 'string' is not assignable to type …
Run Code Online (Sandbox Code Playgroud)

grid reactjs material-ui

5
推荐指数
1
解决办法
3013
查看次数

标签 统计

grid ×1

material-ui ×1

reactjs ×1