探索antd-style:企业级CSS-in-JS解决方案
在现代前端开发中,CSS-in-JS已经成为一种流行的趋势,它不仅简化了样式管理,还提供了强大的动态样式能力。今天,我们要介绍的是一个基于Ant Design V5 Token System构建的企业级CSS-in-JS解决方案——antd-style
。
项目介绍
antd-style
是一个建立在Ant Design V5 Token System之上的CSS-in-JS解决方案,底层依赖于emotion。它不仅继承了Ant Design的设计哲学,还提供了丰富的功能和灵活的定制能力,使得样式开发更加高效和便捷。
项目技术分析
技术栈
- 底层技术:基于
emotion
,一个高性能的CSS-in-JS库。 - 设计系统:紧密集成Ant Design V5 Token System,确保样式的一致性和可维护性。
核心功能
- Token System集成:默认集成Ant Design V5 Token System,简化样式定制,灵活使用token。
- 一键暗黑模式切换:基于antd v5 cssinjs动态主题配置和暗黑主题算法封装,轻松实现亮暗主题切换。
- 灵活的自定义主题扩展:提供自定义token和自定义样式的功能,满足个性化需求。
- 平滑迁移:支持从less平滑迁移到CSS-in-JS,降低迁移成本。
- 微应用兼容性:默认兼容qiankun微应用,同时提供性能优化选项。
- 响应式设计:提供便捷的响应式应用工具函数,快速完成响应式主题开发。
- 样式组合:通过多个原子token的组合,实现复杂交互样式的组合,高度复用。
项目及技术应用场景
antd-style
适用于各种需要高效、灵活样式管理的应用场景,特别是:
- 企业级应用:需要高度定制化和一致性设计的企业级应用。
- 微前端架构:在qiankun等微前端框架中,确保样式的一致性和兼容性。
- 响应式应用:需要快速开发响应式布局的应用。
- 旧项目迁移:需要从less迁移到CSS-in-JS的项目,降低迁移成本。
项目特点
- 集成度高:紧密集成Ant Design V5 Token System,确保样式的一致性和可维护性。
- 灵活性强:提供丰富的自定义选项,满足各种个性化需求。
- 性能优化:在兼容微应用的同时,提供性能优化选项,确保应用的流畅性。
- 开发体验好:提供详细的文档和应用示例,帮助开发者快速上手。
快速开始
安装
推荐使用pnpm
进行安装:
pnpm i antd-style -S
典型用例
以下是一个简单的示例,展示如何使用antd-style
创建样式:
import { createStyles } from 'antd-style';
const useStyles = createStyles(({ token, css }) => ({
container: {
backgroundColor: token.colorBgLayout,
borderRadius: token.borderRadiusLG,
maxWidth: 400,
width: '100%',
height: 180,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginLeft: 'auto',
marginRight: 'auto',
},
card: css`
box-shadow: ${token.boxShadow};
padding: ${token.padding}px;
border-radius: ${token.borderRadius}px;
color: ${token.colorTextTertiary};
background: ${token.colorBgContainer};
transition: all 100ms ${token.motionEaseInBack};
margin-bottom: 8px;
cursor: pointer;
&:hover {
color: ${token.colorTextSecondary};
box-shadow: ${token.boxShadowSecondary};
}
`,
}));
export default () => {
const { styles, cx, theme } = useStyles();
return (
<div className={cx('a-simple-create-style-demo-classname', styles.container)}>
<div className={styles.card}>createStyles Demo