Question

只是想引起我对样式化组件的关注，特别是文档中的建议，即您可以设置像这样的媒体查询模板：

const breakpoint = (...args) => {

    return css`
        @media (min-width: 600px) {
            ${css(...args)}
        }
    `
}

效果很好，可以很容易地这样使用：

${media`background: dodgerblue;`}

我想创建一堆媒体模板，但是文档建议创建可以像这样使用的命名模板：

${media.large`background: dodgerblue;`}

尽管更改断点，我还是希望将附加参数传递给我的函数，而不是为每个函数创建一个不同的函数（尤其是因为我希望能够拥有任意数量的函数并通过整数调用它们而不是名称）。我试着像这样将参数传递给模板文字：

const breakpoint = (bp, ...args) => {

    const minWidth = arrayOfBreakpoints(bp);

    return css`
        @media (min-width: ${minWidth}px) {
            ${css(...args)}
        }
    `

}

$breakpoint(1)`background: olive;`
$breakpoint(2)`background: blue;`

这显然行不通，而且我不知道如何将附加参数传递给带标签的模板文字使用的函数，因为我显然不了解它们的工作原理。有什么想法吗？

Answer 1

您可能正在寻找一种咖喱函数：

const breakpoint = (bp) => {
    const minWidth = arrayOfBreakpoints(bp);
    return (...args) => {
        return css`
            @media (min-width: ${minWidth}px) {
                ${css(...args)}
            }
       `;
    };
}

$breakpoint(1)`background: olive;`
$breakpoint(2)`background: blue;`

样式组件中带有可选附加参数的标记模板文字

1 个答案: