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

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;`