在样式化组件中使用顺风类

我可以在样式化组件中使用顺风类(如颜色)吗？ 我想使用一些类而不是CSS样式来设置组件的样式 这是在样式组件中添加类的方法：

const Button = styled.button.attrs(props => ({
  className: "small",
}))`
 /* other styles */
`; 

因此，与样式不同，attrs类名称只是一个单独的字符串，我想为大小、颜色、显示等添加类。 我每次都要把它们连在一起，有没有更好的方法？

---

解决方案

您可以使用宏，我建议尝试twin.macro：

import tw, { styled } from 'twin.macro'

const Input = styled.input`
  color: purple;
  ${tw`border rounded`}
  ${({ hasHover }) => hasHover && tw`hover:border-black`}
`
const Component = () => <Input hasHover />