custom breakpoint value in config ignored

[jensbambauer]

Hi,

I tried to change the breakpoints in the config and it doesn't seem to work. I provided a theme just like in the example and all options seem to work as intended except the breakpoints.

const theme = {
    grid: {
        container: {
            xs: 'full',
            sm: 'full',
            md: 45,
            lg: 60,
            xl: 200,
        },
       ...
        breakpoints: {
            xs: 1,
            sm: 33.75,
            md: 42,
            lg: 54,
            xl: 187.5,
        }
    },
}

const Layout = ({ children }: LayoutProps) => {
    return (
        <ThemeProvider theme={theme}>
            <Global styles={styling()} />
            {children}
        </ThemeProvider>
    )
}

The values don't make sense but container.xl works, padding etc works too. grid.breakpoints.xl doesn't change the media query for that breakpoint. I dug around a little and found the following line of code:

emotion-grid/src/utils/media.ts

Line 8 in d41431d

const breakpoints = config().grid.breakpoints;

It seems like config() is called without the theme and therefore it uses the defaults.

Is this behaviour intended? It doesn't make sense to me. Would be happy to hear from you.

[mverissimo]

Hi, tks for the report!

Can you share a codesandbox with the related problem?

You're right, I think passing the theme to the media solves this problem, if you have another solution, PRS are welcome.

[jensbambauer]

Would love to contribute!
What's the best way to develop on this project?

[mverissimo]

nicee!

We have guideline, if you need some help or have question, just call me.

[fnavarrodev]

Here a sandbox https://codesandbox.io/s/loving-breeze-z7mq54?file=/src/App.js as ypu can see md is not 1024px but still considers that breakpoint as md For the Hidden component works fine

[fnavarrodev]

I will try to fix it and make a PR if I have time.

[fnavarrodev]

#213

[mverissimo]

Use the new package:
https://github.com/mverissimo/emotion-grid-system