小编Aar*_*ton的帖子

使用标记的模板文字传递进一步的参数

我正在使用样式组件并使用其标记的模板文字语法生成组件,例如:

const Button = styled.button`
  background-color: papayawhip;
  border-radius: 3px;
  color: palevioletred;
`
Run Code Online (Sandbox Code Playgroud)

在一种情况下,我需要调用一个函数,该函数基于断点生成媒体查询,传递要包含在其中的标记的css模板文字.

例如:

media(12)`
   background-color: papayawhip;
`
Run Code Online (Sandbox Code Playgroud)

媒体功能可能如下所示:

const media = mapValues(width => ({ css: (...args) => css`
  @media (min-width: ${width}rem) {
    ${css(...args)}
  }
`}));
Run Code Online (Sandbox Code Playgroud)

是否可以传递值和标记的模板文字,或者我是否以错误的方式进行此操作?

javascript ecmascript-6 reactjs styled-components

7
推荐指数
1
解决办法
862
查看次数