我正在与样式组件并使用其标记模板文字语法生成组件,例如:
const Button = styled.button`
background-color: papayawhip;
border-radius: 3px;
color: palevioletred;
`
在一种情况下,我需要调用一个基于断点生成媒体查询的函数and传递要包含在其中的 css 标记模板文字。
例如:
media(12)`
background-color: papayawhip;
`
媒体功能可能看起来像这样:
const media = mapValues(width => ({ css: (...args) => css`
@media (min-width: ${width}rem) {
${css(...args)}
}
`}));
是否可以同时传递值和标记模板文字,或者我是否以错误的方式处理此问题?
标记模板文字没有魔法,你只需要从你的函数返回另一个函数media(12)
call:
function media(twelve) {
return function(stringParts, ...interpolationValues) {
return …
}
}
或使用箭头函数
const media = (twelve) => (stringParts, ...interpolationValues) => …;
被称为
media(12)`firstPart ${13} secondPart`
// or equvialently
media(12)(["firstPart ", " secondPart"], 13)
但是,如果您不需要进行任何插值而只想接收字符串,则使用参数编写函数可能会更容易
function media(twelve, string) {
return …;
}
并将其称为
media(12, `
templateString
`)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)