Question 186657 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to create custom breakpoints with Material UI without changing theme?

I had a question regarding breakpoints when dealing with responsiveness. I’m using Material UI, which has breakpoints at which you can enable different CSS styles. These are predefined, like xs, xl, md, etc.. I want to set breakpoints at custom pixel values. Is there any way to do this easily within a component without modifying theme?

If this can’t be done, what is a good alternative without changing the theme?

Tags:

2

Answers


  1. 0

    you can create another theme with the same values of the previous one if needed but with the updated breakpoints property and use it wherever you want you just have to wrapp what you want within it for example:

    const newTheme = createMuiTheme({
  //...
  breakpoints: {
    // update
  },
});

    dont forget to import createMuiTheme and ThemeProvider from mui.

    <ThemeProvider theme={newTheme}>
     <div>..</div>
</ThemeProvider>
    Login or Signup to reply.
  2. 0

    You can use two approaches for custom breakpoints without changing the MUI theme.

    • Pass an inline breakpoint value. e.g. 👇

      import Box from '@mui/material/Box'

<Box maxWidth={600}>
  ...
</Box>

    • Create a reusable custom breakpoint object. e.g. 👇

      import Box from '@mui/material/Box'

const customBreakPoints = {
  A: 0,
  B: 600,
  C: 1200,
  D: 1500,
}

<Box maxWidth={customBreakPoints.B}>
       ...
</Box>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search