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->对大和xlarge也是如此。

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

我正在使用打字稿btw，并且出现的错误看起来像这样。

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
        }
    }
});

将MuiTheme与Material-UI结合使用时如何基于自定义断点调整容器的maxWidth

1 个答案: