styled-system: Custom breakpoints not working

I am trying to change the default value but it is not working 😦

"styled-system": "^5.1.0"

  render() {
    const { Component, router, radio, shiftNews } = this.props;
    const themes = {
      breakpoints: ["40em", "52em", "70em"]
    };

 return (
      <Container>
        <GlobalStyle />
        <Provider>
          <Consumer>
            {theme => (
              <ThemeProvider theme={themes}>
                <>
                  <Box width={[1, 1 / 2, 1 / 3]}>
                    <h1>sdasdas</h1>
                  </Box>
                </>
              </ThemeProvider>
            )}
          </Consumer>
        </Provider>
      </Container>
    );
  }

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

Hey, for me it was not working like this, i updated from styled-system 4.0 to 5.0 breakpoints: [576, 768, 991, 1220] Then i added the units breakpoints: ['576px', '768px', '991px', '1220px'] and voila !

Maybe i didn’t read enough in the docs, but i couldn’t find where it said about no default units.

+12

christianguevara on Sep 6, 2019

It sounds like there are two separate issues being discussed here. The breakpoints array requires units to be defined. The original issue has units, but sounds like the theme isn’t being picked up in a Next.js app. @maiconkf can you create a reproduction of the issue using Next.js?

jxnblk on Sep 11, 2019

@kiastorm It looks you might be experiencing a similar situation to what I noted in my comment above (https://github.com/styled-system/styled-system/issues/710#issuecomment-523609195) and referenced in https://github.com/rebassjs/rebass/issues/663. The latest @rebass/grid version upgrades styled-system version, and newer styled-system versions require breakpoints to have units specified, whereas earlier versions added px to the end.

I fixed this by just locking down my @rebass/grid version to the earlier version.

JustinTRoss on Sep 5, 2019