CODEWITHSUNDEEP
reactjsmaterial-ui
jake
jake

Reputation: 1665

Adding breakpoint to custom theme in Material UI Next (reactjs)

I'm creating a custom theme with mui as follows:

export default createMuiTheme({
  breakpoints: {
    keys: [
      "xxs",
      "xs",
      "sm",
      "md",
      "lg",
      "xl",
    ],
    values: {
      xxs: 0,
      xs: 414, // iPhone X and below in portrait mode
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
})

But when I try to use it in a class declaration like so:

const styles = theme => ({
  root: {
    [theme.breakpoints.down('xxs')]: {
      textAlign: "center",
      padding: theme.spacing.unit * 2,
    },
  },
})

I get the following CSS:

@media (max-width:NaNpx) {
  .root-3 {
    padding: 16px;
    text-align: center;
  }
}

Is there a special way to add a custom breakpoint vs. just modifying existing ones?

Upvotes: 9

Views: 16587

Answers (3)

Lord Grosse Jeanine
Lord Grosse Jeanine

Reputation: 1131

As stated here it's now possible :

// MUI theme

const theme = createTheme({
    breakpoints: {
        values: {
            xxs: 0,
            xs: 300,
            sm: 600,
            md: 900,
            lg: 1200,
            xl: 1500,
            xxl: 1800
        }
    }
});

// Typescript module augmentation

import '@mui/material';

declare module '@mui/material/styles' {
    interface BreakpointOverrides {
        xxs: true;
        xs: true;
        sm: true;
        md: true;
        lg: true;
        xl: true;
        xxl: true;
    }
}

Upvotes: 1

Ar26
Ar26

Reputation: 1099

In case you prefer not to change the default values,
You can use a quick workaround, use the theme breakpoints field to change the breakpoint value where needed.

For example:

xxl breakpoint

 [theme.breakpoints.up(theme.breakpoints.values.xl + CUSTOM_BREAKPOINT_DIFFERENCE)]: {
  padding: "0 3.5rem",
},

Upvotes: 1

Luke Peavey
Luke Peavey

Reputation: 3879

Currently it is only possible to customize the values of the predefined breakpoints. Here is an example: 

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 450,
      md: 600,
      lg: 900,
      xl: 1200
    }
  }
});

Edit Material-UI Custom breakpoints

The breakpoint names cannot be configured. There is a comment in createBreakpoints.js explaining this:

// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];

UPDATE (September 2018):

This feature has been requested and is currently under discussion. See material-ui/issues/11649

Upvotes: 10

Related Questions