Реагирование и Tailwind нескольких стилей с некоторыми условиями

Question

У меня сейчас есть следующие настройки:

<li css={tw`text-center list-none`} css={props.left && tw`text-left`}>

Однако я получаю следующее предупреждение:

warning  No duplicate props allowed

Я пробовал несколько вариантов объединения двух css переходит в один, однако я не могу заставить это работать.

<li css={props.left ? tw`text-left list-none` : tw`text-center list-none`}>

Работает, но я не хочу повторять добавление имен классов. Идея в том, что все <li> имеют имена классов text-center list-none, но если существует props.left, то добавить text-left

Answer 1

Это должно работать:

<li css={tw`text-center list-none ${props.left ? text-left : null}`}

Теперь у всех <li> есть классы text-center list-none, но если props.left имеет значение true, то класс text-left добавляется.