在樣式組件中使用順風類

Question

我可以在樣式組件中使用順風類（如 colors ）嗎？ 我想使用一些類而不是 CSS styles 來設置我的組件的樣式，這是在樣式組件中添加 class 的方式：

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

所以與 styles 不同，attrs className 只是一個字符串，我想添加大小、顏色、顯示等類。我必須每次都連接它們，有沒有更好的方法？

Answer 1

您可以使用宏，我建議嘗試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 />