I was thinking about how to convert this styled-emotion code into stitches. Essentially, I need to handle the onlyShowOnDesktop and breakpoint props.
The definition of breakpoint is as follows:
const breakpoint = isTopNavigationBreakPoint ? theme.defaultBreakpoints.xl : theme.defaultBreakpoints.m
This will return either 1280 or 600 depending on whether isTopNavigationBreakPoint is included.
The code structure is like this:
export const Visible = styled.div<{
onlyShowOnDesktop?: boolean
breakpoint?: number
selected?: boolean
}>`
display: ${(props) => (props.onlyShowOnDesktop ? 'none' : 'unset')};
${({ onlyShowOnDesktop, breakpoint }) =>
`
@media(min-width: ${breakpoint}px) {
display: ${onlyShowOnDesktop ? 'unset' : 'none'};
}
`}
`
I'm questioning how to manage the @media section. My current idea involves having 2 variants with breakpoints of 600 and 1280 and nested inside them another variant for onlyShowOnDesktop with objects for true and false. Each object would have a display property with values of unset and none, respectively. However, I am unsure if we should use variants nested in media queries?
If anyone has any suggestions or examples related to using stitches in this scenario, it would be greatly appreciated as I haven't found any online resources addressing this specific case.