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

Question

我正在尝试使用 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,
}

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

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

    overrides: ({
        MuiContainer: ({
            root: {

            },
            maxWidthXl: //????
        })
    })
})

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

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

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

Type 'string' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.

我进行了搜索并发现我也许应该使用 @material-ui/core/styles 中的 createStyles，但在文档中找不到任何示例来说明这应该如何。

其余代码：

    const Container = (props: Props) => {

    return (
        <MuiThemeProvider theme={theme}>
            <ContainerStyled fluid={props.fluid} {...props.fluid ? { maxWidth: false } : { fixed: false }}>
                <Grid container spacing={6}>
                    {props.children}
                </Grid>
            </ContainerStyled>
        </MuiThemeProvider>
    )
}

export default Container

Answer 1

我自己刚刚处理过这个问题。以下工作有效：

import { createMuiTheme } from '@material-ui/core/styles/';

export default createMuiTheme({
    overrides: {
        MuiContainer: {
            maxWidthXs: {
                maxWidth: '300px !important'
            },
            maxWidthSm: {
                maxWidth: '600px !important'
            },
            maxWidthMd: {
                maxWidth: '900px !important'
            },
            maxWidthLg: {
                maxWidth: '1200px !important'
            },
            maxWidthXl: {
                maxWidth: '1500px !important'
            },
            maxWidthXxl: {
                maxWidth: '1920px !important'
            }
        }
    }
});

编辑：这也可以在不覆盖的情况下完成，使用以下内容，但它将覆盖所有组件的默认主题值，而不仅仅是容器：

import { createMuiTheme } from '@material-ui/core/styles/';

export default createMuiTheme({
    breakpoints: {
        keys: {
            0: 'xs',
            1: 'sm',
            2: 'md',
            3: 'lg',
            4: 'xl',
            5: 'full'
        },
        values: {
            xs: 0,
            sm: 600,
            md: 900,
            lg: 1200,
            xl: 1500,
            full: window.innerWidth
        }
    }
});