Ищу элегантный способ сделать динамические свойства для объекта, с конкатинацией строк

Question

Есть такой код:

const setup = (className: string) => {

    return {
        '&-primary': {
            '@apply border-primary dark:border-primary-dark': {},
            '@apply bg-primary dark:bg-primary-dark': {},
            '@apply text-primary-content dark:text-primary-dark': {},

            '&:hover, &.btn-active': {
                '@apply border-primary-focus dark:border-primary-focus-dark': {},
                '@apply bg-primary-focus dark:bg-primary-focus-dark': {},

            },
            '&:focus-visible': {
                outline: '2px solid hsl(var(--p))'
            }
        },
    }
}

Необходимо поменять в нем зашитый primary на динамический className. Обычная конкатинация строк в данном случае не подходит. JS не будет создавать свойства на лету. Есть способ с квадратными скобками, но он потребует создания множества промежуточных объектов. Я им воспользуюсь, но, вдруг, есть что-то более элегантное?

Answer 1

Через квадратные скобки получилось. Как оказалось, внутри них можно использовать конкатинацию:

const setup = (className: string) => {
    return {
        [`&-${className}`]: {
            [`@apply border-${className} dark:border-${className}-dark`]: {},
            [`@apply bg-${className} dark:bg-${className}-dark`]: {},
            [`@apply text-${className}-content dark:text-${className}-dark`]: {},

            '&:hover, &.btn-active': {
                [`@apply border-${className}-focus dark:border-${className}-focus-dark`]: {},
                [`@apply bg-${className}-focus dark:bg-${className}-focus-dark`]: {},

            },
            '&:focus-visible': {
                outline: '2px solid hsl(var(--p))'
            }
        },
    }
}

БЛОГ НА HUSL

Ищу элегантный способ сделать динамические свойства для объекта, с конкатинацией строк

Ответы (1 шт):