使用MUI5在导航栏上使用断点

Question

我试图让我的导航响应使用断点，我已经阅读了文档，并试图实现我的代码如下图所示。

`

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { green } from '@mui/material/colors';
import { AppBar } from '@mui/material';

const styles = (theme) => ({
    root: {
        padding: theme.spacing(1),
        [theme.breakpoints.down('md')]: {
            backgroundColor: theme.palette.secondary.main,
        },
        [theme.breakpoints.up('md')]: {
            backgroundColor: theme.palette.primary.main,
        },
        [theme.breakpoints.up('lg')]: {
            backgroundColor: green[500],
        },
    },
});

export default function MediaQuery() {
    return (
        <AppBar sx={styles}>
            <Typography>red</Typography>
            <Typography>blue</Typography>
            <Typography>yellow</Typography>
        </AppBar>
    );
}
`

Answer 1

您需要从样式函数中移除根键：

import * as React from 'react';
import Typography from '@mui/material/Typography';
import { green } from '@mui/material/colors';
import { AppBar } from '@mui/material';

const styles = theme => ({
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
        backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
        backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
        backgroundColor: green[500],
    },
});

export default function MediaQuery() {
    return (
        <AppBar sx={styles}>
            <Typography>red</Typography>
            <Typography>blue</Typography>
            <Typography>yellow</Typography>
        </AppBar>
    );
}

TS版本将是：

import Typography from '@mui/material/Typography';
import { green } from '@mui/material/colors';
import { AppBar, useTheme } from '@mui/material';

const styles = theme => ({
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
        backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
        backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
        backgroundColor: green[500],
    },
});

export default function MediaQuery() {
    const theme = useTheme();
    return (
        <AppBar sx={styles(theme)}>
            <Typography>red</Typography>
            <Typography>blue</Typography>
            <Typography>yellow</Typography>
        </AppBar>
    );
}