带有一些条件的 React 和 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 为真，则添加text-left 类。