Styled Antd

Styled Antd 是一个参考 chakra-ui 的核心库（@chakra-ui/styled-system和@chakra-ui/system）开发的专门为 antd 组件库设计的 css-in-js 样式解决方案。

Features

• 93.34kB 的总体积，gzip 下体积为 15.46kB；
• 支持以属性的形式编写样式；
• 提供基础的样式化标签，比如<antd.div w="100px" height="100px" bgColor="primaryColor" />，灵活的解决日常样式需求；
• 提供两个基础的可样式化组件 Box 和 Flex；
• 可以把任何组件转化成样式化组件，比如antd(Button)；
• 支持 antd 的主题系统，包括所有 token 和默认的样式算法等；
• 支持响应式样式；
• 支持自定义样式集合，使用 apply 属性应用样式；
• 提供 ClassNames 组件，可灵活的赋予 antd 复杂组件样式，如 Modal 等；
• 支持各种样式伪类选择器；
• 提供一些便捷好用的样式功能，比如 noOfLines、sx等；
• ...

Getting Started

1npm install -S styled-antd antd @emotion/styled @emotion/react react react-dom

注意，仅支持 antd 5.0 以上的版本。

1// App.tsx
2import React from 'react';
3import { ConfigProvider, Box, antd } from 'styled-antd';
4import { Button } from 'antd';
5
6const App: React.FC = () => (
7  <ConfigProvider theme={{ colorError: 'red' }}>
8    <Box w="500px" h="50px" p="24px" bgColor="colorError" rounded="12px" textAlign="center">
9      <antd.a href="#" color="#fff">
10        This is a link.
11      </antd.a>
12      <Button type="primary">Antd Button</Button>
13    </Box>
14  </ConfigProvider>
15);
16
17export default App;

Usage

• Antd JSX elements
• Antd factory function
• Flex & Box
• Theming
• ClassNames
• Style Props
• The apply prop
• The sx prop
• The as prop
• The css prop
• The onOfLines prop
• Gradient
• Responsive Styles