Twin.macro 项目中的 Styled Components 使用指南

郁楠烈Hubert

于 2025-06-05 09:08:54 发布

阅读量234

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00228/article/details/148441523

Twin.macro 项目中的 Styled Components 使用指南

twin.macro 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time. 项目地址: https://gitcode.com/gh_mirrors/tw/twin.macro

前言

在现代前端开发中，CSS-in-JS 已经成为一种流行的样式管理方式。Twin.macro 作为一个强大的工具，巧妙地将 Tailwind CSS 与 CSS-in-JS 库（如 styled-components）结合在一起，为开发者提供了更灵活、更高效的样式编写体验。

本文将详细介绍如何在 Twin.macro 中使用 styled-components 的各种技巧和最佳实践。

基础样式

使用 Twin.macro 的 tw 导入可以轻松创建带有 Tailwind 类的新组件：

import tw from 'twin.macro'

const Wrapper = tw.section`flex w-full`
const Column = tw.div`w-1/2`

const Component = () => (
  <Wrapper>
    <Column></Column>
    <Column></Column>
  </Wrapper>
)

这种语法简洁明了，直接使用 Tailwind 的原子类名就能快速构建组件样式。

条件样式

在实际开发中，我们经常需要根据组件的 props 来动态调整样式。Twin.macro 提供了优雅的解决方案：

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

const Container = styled.div(({ hasBg }) => [
  tw`flex w-full`, // 基础样式
  hasBg && tw`bg-black`, // 条件样式
])

const Component = ({ hasBg }) => (
  <Container hasBg={hasBg}>
    {/* 子组件 */}
  </Container>
)

对于 TypeScript 项目，我们可以添加类型定义：

interface ContainerProps {
  hasBg?: boolean
}

const Container = styled.div<ContainerProps>(({ hasBg }) => [
  tw`flex w-full`,
  hasBg && tw`bg-black`,
])

这种数组形式的样式组织方式使得代码更清晰，便于维护。

多值变体处理

当组件有多种样式变体时，我们可以使用对象来管理这些变体：

const containerVariants = {
  light: tw`bg-white text-black`,
  dark: tw`bg-black text-white`,
  crazy: tw`bg-yellow-500 text-red-500`,
}

const Container = styled.section(() => [
  tw`flex w-full`,
  ({ variant = 'dark' }) => containerVariants[variant],
])

TypeScript 版本中，我们可以使用 TwStyle 来类型化 tw 块：

import { TwStyle } from 'twin.macro'

const containerVariants: Record<'light' | 'dark' | 'crazy', TwStyle> = {
  light: tw`bg-white text-black`,
  dark: tw`bg-black text-white`,
  crazy: tw`bg-yellow-500 text-red-500`,
}

动态样式处理

由于 Babel 的限制，Tailwind 类名不能直接使用动态插值。以下是错误的做法：

// 错误示例 - 不会生效
const Component = styled.div(({ spacing }) => [
  tw`mt-${spacing === 'sm' ? 2 : 4}`,
])

正确的做法是预先定义样式对象：

const styles = { sm: tw`mt-2`, lg: tw`mt-4` }
const Card = styled.div(({ spacing }) => styles[spacing])

或者结合 Tailwind 的主题配置：

import { theme } from 'twin.macro'

const styles = { sm: theme`spacing.2`, lg: theme`spacing.4` }
const Card = styled.div(({ spacing }) => ({ marginTop: styles[spacing] }))

样式覆盖与扩展

样式覆盖

在 JSX 中可以直接使用 tw prop 覆盖组件原有样式：

const Text = tw.div`text-white`
const Component = () => <Text tw="text-black">黑色文字</Text>

组件扩展

可以基于现有组件创建新的样式变体：

const BaseButton = tw.button`px-4 py-2 rounded`

// 基础扩展
const PrimaryButton = tw(BaseButton)`bg-blue-500 text-white`

// 带条件的扩展
const SecondaryButton = styled(BaseButton)(({ isLarge }) => [
  tw`bg-gray-500`,
  isLarge && tw`text-lg`,
])

元素类型切换

使用 as prop 可以轻松改变组件的 HTML 标签类型：

const Heading = tw.h1`text-2xl font-bold`
const Component = () => (
  <>
    <Heading>我是H1</Heading>
    <Heading as="h2">我是H2但保持相同样式</Heading>
  </>
)

自定义选择器

Twin.macro 支持使用方括号语法添加自定义选择器：

const Button = tw.button`
  [> i]:block
  [> span]:(text-blue-500 w-10)
`

这种语法非常灵活，可以支持各种复杂的选择器场景：

// 主题切换
const ThemeText = tw.div`[.dark-mode &]:(bg-black text-white)`

// 组状态
const DisabledText = tw.div`[.group:disabled &]:text-gray-500`

// 媒体查询
const ResponsiveBox = tw.div`[@media (min-height: 800px)]:hidden`

自定义值与高级 CSS

自定义值

使用方括号可以直接插入自定义 CSS 值：

tw.div`top-[calc(100vh - 2rem)]`

高级 CSS 样式

对于复杂的 CSS 需求，可以使用模板字符串语法：

import { css, theme } from 'twin.macro'

const FancyInput = styled.input`
  ${css`
    -webkit-tap-highlight-color: transparent;
    background-color: ${theme`colors.red.500`};
    ${tw`border-2 rounded`};

    &:focus {
      ${tw`ring-2 ring-blue-500`}
    }
  `}
`

或者使用对象语法，更加简洁：

const FancyInput = styled.input({
  WebkitTapHighlightColor: 'transparent',
  backgroundColor: theme`colors.red.500`,
  ...tw`border-2 rounded`,
  '&:focus': tw`ring-2 ring-blue-500`,
})