Override default breakpoints when using media queries about styled-bootstrap-grid

[dragma]

It seems you are right !
@damassi what do you think ?
Unfortunately, I have no time right now to test this, maybe tomorrow !

[damassi]

Hi @tomhonig - It should be props.theme.grid.breakpoints, as seen in our theme here: https://github.com/artsy/palette/blob/master/src/Theme.tsx#L94-L99.

I think the issue you might be seeing is a bug related to the media helper. On our end we use our own custom one: https://github.com/artsy/palette/blob/master/src/helpers/media.ts

[dragma]

I'm on my phone, in a bus. I'll explain with more details later if you need it.

As far as I can see on my tiny screen, I think that you are right @tomhonig. We should read the styledBootstrapGrid object instead of the grid one.

The reason why the props.theme.grid object works in @damassi case is because, at the end, the props.theme object is shared between the ThemeProvider and the GridThemeProvider.

I will experience this tonight (or tomorrow) and I'll come back with more answers.

I confess, I don't need to use custom breakpoints on my different projects. :$

[damassi]

@dragma - one thing that I think would simplify this grid approach is removing the GridThemeProvider component completely. Its not needed since one has access to the styled-components theme provider, and the settings set there are accessible from within the lib. I keep meaning to PR this change back, but it would be a major version breaking change. It would simplify things considerably though.

[tomhonig]

Thank you for your replies!
Using ThemeProvider instead of the GridThemeProvider solved it:)