-
Notifications
You must be signed in to change notification settings - Fork 19
Open

Description
The following does not work:
const mq = facepaint({
_: '@media(min-width: 0px)',
xs: '@media(min-width: 480px)',
sm: '@media(min-width: 768px)',
md: '@media(min-width: 992px)',
lg: '@media(min-width: 1200px)',
xl: '@media(min-width: 1600px)',
})
const Test = styled.div`
background-color: orange;
${mq({
width: { _: '15px', xs: '30px', md: '95px', xl: '158px' },
height: { _: '15px', xs: '30px', md: '95px', xl: '158px' },
})};
`
I am wondering, though -- is something like this possible? I.e., is it possible to create an object with named keys that I can use to reference which breakpoints I want to use?
If so, how?
Thanks.
Metadata
Metadata
Assignees
Labels
No labels