在样式组件中使用顺风类答案

【问题标题】：use tailwind classes into styled-components在样式组件中使用顺风类
【发布时间】：2021-04-03 21:19:10
【问题描述】：

我可以在 styled-components 中使用顺风类（如颜色）吗？我想使用一些类而不是 CSS 样式来设置我的组件的样式这是在样式组件中添加类的方式：

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

所以与样式不同，attrs className 只是一个字符串，我想为大小、颜色、显示等添加类。我每次都要连接它们，有没有更好的方法？

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案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 />

【讨论】：