Glamorous 项目示例详解：从基础到高级用法

Glamorous 项目示例详解：从基础到高级用法

glamorous DEPRECATED: 💄 Maintainable CSS with React 项目地址: https://gitcode.com/gh_mirrors/gl/glamorous

前言

Glamorous 是一个基于 React 的 CSS-in-JS 解决方案，它提供了一种优雅的方式来编写组件样式。本文将通过一系列示例，深入讲解 Glamorous 的核心功能和高级用法，帮助开发者掌握这一强大的样式工具。

基础示例

简单按钮组件

Glamorous 最基础的用法是创建带有样式的组件。以下示例展示了如何创建一个按钮组件，包含静态样式、伪类选择器和媒体查询：

const Button = glamorous.button({
  color: 'white',
  backgroundColor: 'blue',
  padding: '10px 20px',
  borderRadius: 4,
  border: 'none',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: 'darkblue'
  },
  '@media(max-width: 768px)': {
    width: '100%'
  }
})

这个示例展示了 Glamorous 的几个核心特性：

• 使用对象字面量定义样式
• 支持伪类选择器（如:hover）
• 支持媒体查询

动态与静态样式结合

Glamorous 的一个强大特性是能够清晰地区分静态和动态样式：

const DynamicLink = glamorous.a(
  // 静态样式
  {
    color: 'blue',
    textDecoration: 'none'
  },
  // 动态样式函数
  ({ size = 'small' }) => ({
    fontSize: size === 'big' ? 24 : 16
  })
)

这种模式的优势在于：

1. 静态样式只需定义一次
2. 动态样式根据props变化
3. 代码结构清晰，易于维护

高级CSS特性支持

CSS Grid与@supports

Glamorous 支持现代CSS特性，如CSS Grid，并可以通过@supports提供优雅降级：

const GridLayout = glamorous.div({
  margin: 'auto',
  backgroundColor: '#fff',
  // 使用@supports检测浏览器支持
  '@supports (display: grid)': {
    display: 'grid',
    gridGap: 10,
    gridTemplateAreas: `
      "header header"
      "sidebar content"
    `
  }
})

CSS组合器

Glamorous 支持使用&符号引用生成的类名，实现复杂的CSS选择器逻辑：

const ListItem = glamorous.li({
  padding: '10px',
  '& + &': {  // 相邻兄弟选择器
    borderTop: '1px solid #ddd'
  },
  '&:first-child': {  // 伪类选择器
    fontWeight: 'bold'
  }
})

与其他技术栈集成

与Next.js集成

在Next.js项目中使用Glamorous时，需要注意服务端渲染的样式处理。Glamorous 内置支持SSR，只需确保在渲染页面时正确提取关键CSS。

与create-react-app配合

Glamorous 可以无缝集成到create-react-app创建的项目中，无需任何额外配置。这是因为它不依赖webpack的特殊配置。

与Polished结合

Polished是一个CSS工具库，可以与Glamorous完美配合：

import { lighten } from 'polished';

const StyledDiv = glamorous.div({
  backgroundColor: lighten(0.2, '#ff0000'),
  padding: '20px'
})

这种组合可以让你在JavaScript中使用Sass-like的函数和mixins。

高级组件模式

默认属性设置

当包装现有组件时，可以使用defaultProps设置默认样式属性：

const FancyButton = glamorous.button(
  ({ color = 'blue', size = 'medium' }) => ({
    color,
    fontSize: size === 'large' ? '18px' : '14px'
  })
)

FancyButton.defaultProps = {
  type: 'button',
  disabled: false
}

与React Transition Group集成

Glamorous 可以很好地与React Transition Group配合实现动画效果：

const AnimatedBox = glamorous.div({
  transition: 'all 300ms',
  opacity: 1,
  '.fade-enter': {
    opacity: 0
  },
  '.fade-enter-active': {
    opacity: 1
  }
})

实际应用示例

颜色对比度检查器

一个实用的例子是构建颜色对比度检查工具。使用Glamorous可以轻松实现动态样式更新：

const ContrastBox = glamorous.div(
  ({ bg, fg }) => ({
    backgroundColor: bg,
    color: fg,
    padding: '20px',
    margin: '10px'
  })
)

这个组件会根据传入的背景色(bg)和前景色(fg)动态更新样式，非常适合构建可访问性工具。

总结

Glamorous 提供了强大而灵活的CSS-in-JS解决方案，通过本文的示例，我们看到了：

1. 基础组件样式定义
2. 动态样式处理
3. 现代CSS特性支持
4. 与其他库的集成
5. 高级组件模式

这些特性使Glamorous成为构建可维护、高性能React应用的理想选择。无论是简单的静态组件还是复杂的动态UI，Glamorous都能提供优雅的解决方案。

glamorous DEPRECATED: 💄 Maintainable CSS with React 项目地址: https://gitcode.com/gh_mirrors/gl/glamorous