Помеченные литералами шаблона в styleled-компонентах с необязательным дополнительным параметром

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