I created some custom components using styled-components lib and extended them with built in spacer from styled-system to inherit responsive props.
const CustomContainer = styled.div<SpaceProps & LayoutProps>(compose(layout, space));
These are custom breakpoints:
const breakpoints: Breakpoints = ['600px', '900px', '1200px', '1536px'];
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];
Now instead of array approach of passing responsive props, i.e. width=['100%', '50%'] where 100% would match first breakpoint etc, I passed an object which is more intuitive:
padding={_: '50%', md: '100%'} I would expect to have 50% applied by default, and for md and down to have 100% but it inverts media queries behind.
It by default applies media (min-width: 900px) query on component instead of
media (max-width: 900px). And I could not make it behave as I want. Thus I have '100%width on large screens because of mentioned media query, and bellow it applied50%`.
Could not find any acceptable solution or create it to use in most intuitive way as object approcah where key defines desired breakpoint AND DOWN (i.e. max-width).
Any help