I'm working with styled-components and generating components using their tagged template literal syntax such as:
const Button = styled.button`
background-color: papayawhip;
border-radius: 3px;
color: palevioletred;
`
In one case I need to call a function that generates a media query based on a breakpoint and passes the tagged template literal of css to be included within.
for example:
media(12)`
background-color: papayawhip;
`
The media function might look something like this:
const media = mapValues(width => ({ css: (...args) => css`
@media (min-width: ${width}rem) {
${css(...args)}
}
`}));
Is passing both a value and a tagged template literal possible, or am I going about this the wrong way?
Tagged template literals are no magic, you just need to return another function from your media(12)
call:
function media(twelve) {
return function(stringParts, ...interpolationValues) {
return …
}
}
or using arrow functions
const media = (twelve) => (stringParts, ...interpolationValues) => …;
to be called as
media(12)`firstPart ${13} secondPart`
// or equvialently
media(12)(["firstPart ", " secondPart"], 13)
However, if you don't need to do any interpolation but just want to receive a string, it might be easier to write a function with the parameters
function media(twelve, string) {
return …;
}
and call it as
media(12, `
templateString
`)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.