Reactjs React和Tailwind具有一些条件的多个样式

我目前有以下设置：

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

我尝试了几种方法将两个css道具组合成一个，但是我似乎无法实现这一点

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

可以，但我不想重复添加类名。想法是所有的

都有类名

文本中心列表无

，但如果存在

道具左

，则要添加

文本左

，应该可以：

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

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