Using breakpoints on my navigation bar with MUI5

user_16681278 0
Viewed 294

I am trying to make my navigation responsive using breakpoints, i have read the docs and tried to implement my code as shown here

`

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>
    );
}
`
material-ui reactjs
1 Answers

You need remove root key from styles function:

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

and the TS version would be:

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