From d711831ed9c2dc610d8cc9a2e07803e684ca81f3 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Wed, 9 Aug 2023 12:28:41 +0800 Subject: [PATCH 1/4] :memo: docs: update best practice docs --- docs/best-practice/antd-based-components.md | 8 +++ docs/best-practice/antd-override.md | 14 +++++ docs/{case => best-practice}/clay.md | 3 +- docs/best-practice/custom-token-types.md | 53 +++++++++++++++++++ docs/best-practice/demos/NestElements.tsx | 36 +++++++++++++ .../demos/StaticMethod/index.tsx | 20 +++++++ .../demos/StaticMethod/layout.tsx | 32 +++++++++++ .../demos/StaticMethod/request.ts | 24 +++++++++ docs/best-practice/demos/tsconfig.json | 15 ++++++ docs/best-practice/index.md | 14 +++++ docs/{case => best-practice}/mac-select.md | 6 ++- .../mirgration-less-global-style.md | 50 +++++++++++++++++ docs/best-practice/nest-element-style.md | 51 ++++++++++++++++++ docs/best-practice/static-message.md | 48 +++++++++++++++++ docs/{case => best-practice}/styled.md | 2 +- docs/case/index.md | 6 --- 16 files changed, 371 insertions(+), 11 deletions(-) create mode 100644 docs/best-practice/antd-based-components.md create mode 100644 docs/best-practice/antd-override.md rename docs/{case => best-practice}/clay.md (74%) create mode 100644 docs/best-practice/custom-token-types.md create mode 100644 docs/best-practice/demos/NestElements.tsx create mode 100644 docs/best-practice/demos/StaticMethod/index.tsx create mode 100644 docs/best-practice/demos/StaticMethod/layout.tsx create mode 100644 docs/best-practice/demos/StaticMethod/request.ts create mode 100644 docs/best-practice/demos/tsconfig.json create mode 100644 docs/best-practice/index.md rename docs/{case => best-practice}/mac-select.md (80%) create mode 100644 docs/best-practice/mirgration-less-global-style.md create mode 100644 docs/best-practice/nest-element-style.md create mode 100644 docs/best-practice/static-message.md rename docs/{case => best-practice}/styled.md (87%) delete mode 100644 docs/case/index.md diff --git a/docs/best-practice/antd-based-components.md b/docs/best-practice/antd-based-components.md new file mode 100644 index 00000000..83b9fa02 --- /dev/null +++ b/docs/best-practice/antd-based-components.md @@ -0,0 +1,8 @@ +--- +title: 基于 antd v5 二次封装组件库 +group: + title: 组件库研发 + order: 2 +--- + +# 基于 antd v5 二开的组件库，应该如何优雅书写样式？ diff --git a/docs/best-practice/antd-override.md b/docs/best-practice/antd-override.md new file mode 100644 index 00000000..464a7ba5 --- /dev/null +++ b/docs/best-practice/antd-override.md @@ -0,0 +1,14 @@ +--- +title: 覆盖 antd v5 组件样式 +group: 主题定制 +--- + +# 如何更加优雅地覆写 antd 组件样式？ + +## 基本覆写 + +## 抬升权重覆写 + +## 多 classNames 场景覆写 + +## 基于 ConfigProvider 覆写 diff --git a/docs/case/clay.md b/docs/best-practice/clay.md similarity index 74% rename from docs/case/clay.md rename to docs/best-practice/clay.md index 8a408a45..e8b1ce72 100644 --- a/docs/case/clay.md +++ b/docs/best-practice/clay.md @@ -1,7 +1,6 @@ --- title: 黏土风 UI -order: 10 -group: 自定义主题 +group: 样式案例 --- # 黏土风格 diff --git a/docs/best-practice/custom-token-types.md b/docs/best-practice/custom-token-types.md new file mode 100644 index 00000000..72bac560 --- /dev/null +++ b/docs/best-practice/custom-token-types.md @@ -0,0 +1,53 @@ +--- +title: 扩展自定义 Token 类型定义 +group: + title: 主题定制 + order: 1 +--- + +# 如何给 antd-style 扩展 CustomToken 对象类型定义？ + +## 解决思路 + +通过给 `antd-style` 扩展 `CustomToken` 接口的类型定义，可以为 `useTheme` hooks 中增加相应的 token 类型定义。 + +同时，给 `ThemeProvider` 对象添加泛型，可以约束 `customToken` 的入参定义。 + +```tsx | pure +import { ThemeProvider, useTheme } from 'antd-style'; + +interface NewToken { + customBrandColor: string; +} + +// 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象 +declare module 'antd-style' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface CustomToken extends NewToken {} +} + +const App = () => { + const token = useTheme(); + return
{token.customBrandColor}
; +}; + +export default () => ( + // 给 ThemeProvider 对象添加泛型后可以约束 customToken 接口的入参定义 + customToken={{ customBrandColor: '#c956df' }}> + + +); +``` + +:::info +由于 CustomToken 大概率是一个空 interface，如果在项目中有配置 ` @typescript-eslint/no-empty-interface` 的规则，就在代码格式化时导致接口定义被订正改为 type，而 type 是无法扩展的，会导致提示丢失（相关 issue: [#16](https://github.com/ant-design/antd-style/issues/16)）。因此解决方案为如上述示例代码一样，添加禁用规则。 +::: + +## 参考代码 + +- [dumi-theme-antd-style](https://github.com/arvinxx/dumi-theme-antd-style/blob/master/src/styles/customToken.ts) +- [Ant Design 官网](https://github.com/ant-design/ant-design/blob/master/.dumi/theme/SiteThemeProvider.tsx) + +## 相关讨论 + +- [🧐[问题] 请问一下如何给 antd-style 扩展 CustomToken 对象类型定义](https://github.com/ant-design/antd-style/issues/16) diff --git a/docs/best-practice/demos/NestElements.tsx b/docs/best-practice/demos/NestElements.tsx new file mode 100644 index 00000000..b6cd7b1e --- /dev/null +++ b/docs/best-practice/demos/NestElements.tsx @@ -0,0 +1,36 @@ +import { createStyles } from 'antd-style'; + +const useStyles = createStyles(({ css, cx }) => { + // 使用 cx 包裹 css + const child = cx(css` + background: red; + width: 100px; + height: 100px; + `); + + return { + parent: css` + cursor: pointer; + + &:hover { + .${child} { + background: blue; + } + } + `, + child, + }; +}); + +const Demo = () => { + const { styles } = useStyles(); + + return ( +
+
+ hover to change color +
+ ); +}; + +export default Demo; diff --git a/docs/best-practice/demos/StaticMethod/index.tsx b/docs/best-practice/demos/StaticMethod/index.tsx new file mode 100644 index 00000000..7cf3d3ef --- /dev/null +++ b/docs/best-practice/demos/StaticMethod/index.tsx @@ -0,0 +1,20 @@ +/** + * iframe: 240 + */ +import { Button, Space } from 'antd'; +import Layout from './layout'; +import { showMessage, showModal, showNotification } from './request'; + +const App = () => ( + + + + + + + +); + +export default App; diff --git a/docs/best-practice/demos/StaticMethod/layout.tsx b/docs/best-practice/demos/StaticMethod/layout.tsx new file mode 100644 index 00000000..f2b27100 --- /dev/null +++ b/docs/best-practice/demos/StaticMethod/layout.tsx @@ -0,0 +1,32 @@ +/** + * iframe: 240 + */ +import { ThemeProvider } from 'antd-style'; +import { MessageInstance } from 'antd/es/message/interface'; +import { ModalStaticFunctions } from 'antd/es/modal/confirm'; +import { NotificationInstance } from 'antd/es/notification/interface'; +import { PropsWithChildren } from 'react'; +import { Center } from 'react-layout-kit'; + +export let message: MessageInstance, + modal: Omit, + notification: NotificationInstance; + +export default ({ children }: PropsWithChildren) => { + return ( +
+ { + message = instances.message; + modal = instances.modal; + notification = instances.notification; + }} + > + {children} + +
+ ); +}; diff --git a/docs/best-practice/demos/StaticMethod/request.ts b/docs/best-practice/demos/StaticMethod/request.ts new file mode 100644 index 00000000..5a813a5b --- /dev/null +++ b/docs/best-practice/demos/StaticMethod/request.ts @@ -0,0 +1,24 @@ +/** + * iframe: 240 + */ +import { message, modal, notification } from './layout'; + +export const showMessage = () => { + message.success('Success!'); +}; + +export const showNotification = () => { + notification.info({ + message: `Notification`, + description: 'Hello, Ant Design Style', + }); +}; + +export const showModal = () => { + modal.warning({ + title: 'This is a warning message', + content: 'some messages...some messages...', + centered: true, + maskClosable: true, + }); +}; diff --git a/docs/best-practice/demos/tsconfig.json b/docs/best-practice/demos/tsconfig.json new file mode 100644 index 00000000..a434c4d3 --- /dev/null +++ b/docs/best-practice/demos/tsconfig.json @@ -0,0 +1,15 @@ +{ + "include": ["**/*.tsx", "**/*.ts"], + "compilerOptions": { + "strict": true, + "declaration": true, + "skipLibCheck": true, + "esModuleInterop": true, + "jsx": "react-jsx", + "lib": ["DOM", "ESNext"], + "baseUrl": ".", + "paths": { + "antd-style": ["../../../es"] + } + } +} diff --git a/docs/best-practice/index.md b/docs/best-practice/index.md new file mode 100644 index 00000000..06e9a51d --- /dev/null +++ b/docs/best-practice/index.md @@ -0,0 +1,14 @@ +--- +title: 最佳实践与案例集 +nav: + title: 最佳实践 + order: 3 +--- + +# 最佳实践与案例集 + +随着 antd-style 被更多用户使用，发现大家在实际应用中还是会遇到一些边角问题。 + +因此这一趴调整为「最佳实践」与「案例集」，按照大家常遇到的场景，来详细阐述 antd-style 使用的最佳实践。 + +当然，除了最佳实践之外，这部分也包含了一些实践案例，希望能够帮助到你。 diff --git a/docs/case/mac-select.md b/docs/best-practice/mac-select.md similarity index 80% rename from docs/case/mac-select.md rename to docs/best-practice/mac-select.md index 792e167a..26f2381c 100644 --- a/docs/case/mac-select.md +++ b/docs/best-practice/mac-select.md @@ -1,6 +1,8 @@ --- -title: MacOS选择器 -group: 自定义组件 +title: 自定义组件： MacOS 选择器 +group: + title: 样式案例 + order: 10 --- # MacOS 选择器 diff --git a/docs/best-practice/mirgration-less-global-style.md b/docs/best-practice/mirgration-less-global-style.md new file mode 100644 index 00000000..86c6f073 --- /dev/null +++ b/docs/best-practice/mirgration-less-global-style.md @@ -0,0 +1,50 @@ +--- +title: CSS Modules 全局样式覆写迁移 +group: + title: 样式书写 + order: 0 +--- + +# CSS Modules 全局样式覆写迁移 + +迁移过程中 CSS Modules 语法中使用到的 `:global` 怎么处理，之前有部分场景需要通过 :global 去覆盖组件样式，迁移过程中这部分代码如何处理？ + +## 解决方案 + +优先使用 [codemod](/guide/migrate-less-codemod) 一键迁移，该 Codemod 会自动将 Css Modules 语法中的 :global 转换为 +antd-style 中的语法。 + +如需手动调整，那么直接移除 :global 语法既可。 + +迁移前： + +```less +.container { + :global(.ant-btn-link) { + padding: 0; + font-size: 12px; + } +} +``` + +迁移后： + +```ts +const useStyles = createStyles(({ css }) => ({ + container: css` + .ant-btn-link { + padding: 0; + font-size: 12px; + } + `, +})); +``` + +## 原理解析 + +css module 中的元素默认会添加 hash，`:global` 语法是为了避免给样式名添加 hash。而 antd-style 使用了 `emotion/css` +作为底层样式库，其中联合的样式并不会自动添加 hash，因此直接去除 :global 即可。 + +## 相关讨论 + +- [🧐[问题] 迁移过程中 less 语法中使用到的 :global 怎么处理](https://github.com/ant-design/antd-style/issues/72) diff --git a/docs/best-practice/nest-element-style.md b/docs/best-practice/nest-element-style.md new file mode 100644 index 00000000..c402870d --- /dev/null +++ b/docs/best-practice/nest-element-style.md @@ -0,0 +1,51 @@ +--- +title: 父子联动的样式书写 +group: + title: 样式书写 + order: 0 +--- + +# 如何书写联动样式 + +有时候我们需要实现在 hover 容器组件的时候，修改 child 的样式。这种情况下，我们可以使用 cx 来生成 className。 + +## Demo + +核心代码： + +```ts +const useStyles = createStyles(({ css, cx }) => { + // 1. 使用 cx 包裹 css，得到 (acss-xxx) 类名 + const child = cx(css` + background: red; + width: 100px; + height: 100px; + `); + + return { + parent: css` + cursor: pointer; + + &:hover { + // 2. 实现级联 + .${child} { + background: blue; + } + } + `, + // 3. 导出 child className + child, + }; +}); +``` + + + +## 原理解析 + +思路上很简单，因此 `css` 方法产出的始终是[序列化样式对象](/api/create-styles#css)。用 `cx` 包裹 `css` 对象，就会将该对象转成类名 (`acss-xxxx`)。 + +## 相关讨论 + +- [[问题] 样式怎么嵌套呢](https://github.com/ant-design/antd-style/issues/54) +- [[BUG] 开启 babel-plugin-antd-style 插件后内部 cx 生成的类名和导出的不一致](https://github.com/ant-design/antd-style/issues/83) diff --git a/docs/best-practice/static-message.md b/docs/best-practice/static-message.md new file mode 100644 index 00000000..603afea9 --- /dev/null +++ b/docs/best-practice/static-message.md @@ -0,0 +1,48 @@ +--- +title: antd 静态方法的主题失效 +group: 主题定制 +--- + +# Modal 、message 等 antd 的静态方法不响应主题，如何解决？ + +原先在 v4 中可以在非组件环境下使用这些静态方法，比如放在 axios 里面用 `message.error` 做一些报错的提示。 + +现在 V5 版本里，需要用 `const { message } = App.useApp();` + +是不是意味着无法再像以前那样用了？ + +## 解决方案 + +当然不是，参考下方 Demo，通过在独立文件中定义相应的实例变量，即可在非 React 环境下使用，并且仍然响应主题。 + + + +## 原理解析 + +antd-style 在 `ThemeProvider` 中提供了一个 [`getStaticInstance`](api/theme-provider#消费静态实例方法) 接口，用户可以从中获取集成后的实例。 + +该方法的实现原理也很简单，以 message 为例： + +```tsx | pure +import { message } from 'antd'; + +const Provider = ({ getStaticInstance, children, theme }) => { + // 1. 使用 useMessage 获取实例 + const [messageInstance, messageContextHolder] = message.useMessage(staticInstanceConfig?.message); + + useEffect(() => { + // 3. 将实例用 getStaticInstance 抛出 + getStaticInstance?.({ + message: messageInstance, + }); + }, []); + + return ( + + {/* 2. 插入 message 的上下文 */} + {messageContextHolder} + {children} + + ); +}; +``` diff --git a/docs/case/styled.md b/docs/best-practice/styled.md similarity index 87% rename from docs/case/styled.md rename to docs/best-practice/styled.md index e94b8213..0a1b98ad 100644 --- a/docs/case/styled.md +++ b/docs/best-practice/styled.md @@ -1,6 +1,6 @@ --- title: 样式组件 -group: 自定义主题 +group: 样式案例 --- # 使用 Styled 构建风格样式组件 diff --git a/docs/case/index.md b/docs/case/index.md deleted file mode 100644 index 4928a7a4..00000000 --- a/docs/case/index.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 案例 -nav: - title: 案例 - order: 3 ---- From 96c04280868d96fd0b743d2cf3c48d23d19c6a49 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Mon, 14 Aug 2023 13:45:44 +0800 Subject: [PATCH 2/4] :white_check_mark: ci: fix ci lint --- tests/components/ThemeProvider.test.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/components/ThemeProvider.test.tsx b/tests/components/ThemeProvider.test.tsx index b5b4e0c7..c1287466 100644 --- a/tests/components/ThemeProvider.test.tsx +++ b/tests/components/ThemeProvider.test.tsx @@ -1,7 +1,6 @@ import { act, render, renderHook } from '@testing-library/react'; -import { App, theme } from 'antd'; +import { App, MappingAlgorithm, theme } from 'antd'; import { GetCustomToken, ThemeProvider, css, cx, useTheme, useThemeMode } from 'antd-style'; -import { MappingAlgorithm } from 'antd/es/config-provider/context'; import { MessageInstance } from 'antd/es/message/interface'; import { NotificationInstance } from 'antd/es/notification/interface'; import { FC, PropsWithChildren } from 'react'; From b22b0392e44e64a930c2c346db3d10ffe0238ec5 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Mon, 14 Aug 2023 13:57:11 +0800 Subject: [PATCH 3/4] :memo: docs: update best practice docs --- docs/best-practice/antd-based-components.md | 2 +- docs/best-practice/antd-override.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/best-practice/antd-based-components.md b/docs/best-practice/antd-based-components.md index 83b9fa02..03c04728 100644 --- a/docs/best-practice/antd-based-components.md +++ b/docs/best-practice/antd-based-components.md @@ -1,5 +1,5 @@ --- -title: 基于 antd v5 二次封装组件库 +title: 🚧 基于 antd v5 二次封装组件库 group: title: 组件库研发 order: 2 diff --git a/docs/best-practice/antd-override.md b/docs/best-practice/antd-override.md index 464a7ba5..a806a168 100644 --- a/docs/best-practice/antd-override.md +++ b/docs/best-practice/antd-override.md @@ -1,5 +1,5 @@ --- -title: 覆盖 antd v5 组件样式 +title: 🚧 覆盖 antd v5 组件样式 group: 主题定制 --- From 0b9d39a0021ba7f9c704af3f9135e9cdc32be9a3 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Mon, 14 Aug 2023 16:17:54 +0800 Subject: [PATCH 4/4] =?UTF-8?q?:memo:=20docs:=20=E8=A1=A5=E5=85=85=20antd?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AE=9E?= =?UTF-8?q?=E8=B7=B5=E6=A1=88=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/best-practice/antd-override.md | 35 +++++++++++++- .../demos/ConfigProviderOverride.tsx | 48 +++++++++++++++++++ docs/best-practice/demos/DefaultOverride.tsx | 30 ++++++++++++ docs/best-practice/demos/InputclassNames.tsx | 36 ++++++++++++++ docs/best-practice/demos/OverrideWeight.tsx | 32 +++++++++++++ 5 files changed, 179 insertions(+), 2 deletions(-) create mode 100644 docs/best-practice/demos/ConfigProviderOverride.tsx create mode 100644 docs/best-practice/demos/DefaultOverride.tsx create mode 100644 docs/best-practice/demos/InputclassNames.tsx create mode 100644 docs/best-practice/demos/OverrideWeight.tsx diff --git a/docs/best-practice/antd-override.md b/docs/best-practice/antd-override.md index a806a168..b66b8ec0 100644 --- a/docs/best-practice/antd-override.md +++ b/docs/best-practice/antd-override.md @@ -1,14 +1,45 @@ --- -title: 🚧 覆盖 antd v5 组件样式 +title: 自定义 antd 组件样式 group: 主题定制 --- # 如何更加优雅地覆写 antd 组件样式？ +## 基于 ConfigProvider 自定义 + +antd 在 V5 提供了全新的 theme 属性用于自定义，因此如果需要自定义组件样式，建议优先采用 CP 上的 theme 字段。 + +示例 demo 如下： + + + +:::info +更多基于 ConfigProvider 的主题定制能力，详见 [聊聊 Ant Design V5 的主题（上）：CSSinJS 动态主题的花活](https://www.yuque.com/antfe/featured/durxuu94nvgvgmzq#vFlnd)。 +::: + +antd-style 的 ThemeProvider 是基于 ConfigProvider 的业务层封装，提供业务友好的定制能力，查看：[自定义主题](/guide/custom-theme) + ## 基本覆写 +`createStyles` 方法存在一个 `prefixCls` 参数，使用该参数可以传入组件的前缀，这样一来，任何的样式覆写都可以随着 prefixCls 的变化而自动变化。 + + + ## 抬升权重覆写 +在某些组件中，直接添加类名可能因为权重不够高，导致无法覆盖样式，此时可以通过 `&` 符号来抬升相应的权重。 + + + ## 多 classNames 场景覆写 -## 基于 ConfigProvider 覆写 +classNames 是 antd V5 的一个重头戏: [[RFC] Semantic DOM Structure for all Components](https://github.com/ant-design/ant-design/discussions/40221)。 +在过去，我们要做样式定义，需要找很多 dom 节点进行大量的样式覆写，而 antd 版本升级的过程中，有时候会对 dom 结构进行调整。这样一来，我们覆写的样式就会出现问题。 + +而 classNames 将为我们提供一个稳定的 dom 结构 API ，我们可以通过 classNames 传入的类名，将会文档指向对应的 dom 节点，进而大大降低 DOM 变化带来的 Breaking Change 风险，同时也让我们不必再 hack 式地找样式类名。 + + + +## 相关讨论 + +- [样式权重问题](https://github.com/ant-design/antd-style/issues/24) diff --git a/docs/best-practice/demos/ConfigProviderOverride.tsx b/docs/best-practice/demos/ConfigProviderOverride.tsx new file mode 100644 index 00000000..9c0764d3 --- /dev/null +++ b/docs/best-practice/demos/ConfigProviderOverride.tsx @@ -0,0 +1,48 @@ +/** + * iframe: true + */ + +import { Button, Checkbox, ConfigProvider, Popover, theme } from 'antd'; +import { Flexbox } from 'react-layout-kit'; + +export default () => { + const { token } = theme.useToken(); + + return ( + +
+ +
antd V5 的 Popup ，结合 结合 组件级 Token，可以非常简单地实现自定义样式
+ + + 不再显示 + + +
+ } + color={'blue'} + arrow={{ pointAtCenter: true }} + trigger="hover" + > + antd v5 的组件级自定义样式，轻松又便捷 + +
+ + ); +}; diff --git a/docs/best-practice/demos/DefaultOverride.tsx b/docs/best-practice/demos/DefaultOverride.tsx new file mode 100644 index 00000000..89d07de6 --- /dev/null +++ b/docs/best-practice/demos/DefaultOverride.tsx @@ -0,0 +1,30 @@ +/** + * defaultShowCode: true + */ +import { Button, Space } from 'antd'; +import { ThemeProvider, createStyles } from 'antd-style'; + +const useStyles = createStyles(({ token, css, prefixCls }) => ({ + override: css` + &.${prefixCls}-btn { + background-color: ${token.colorWarning}; + } + `, +})); + +const Demo = ({ text }: { text?: string }) => { + const { styles } = useStyles(); + + return ; +}; + +export default () => { + return ( + + + + + + + ); +}; diff --git a/docs/best-practice/demos/InputclassNames.tsx b/docs/best-practice/demos/InputclassNames.tsx new file mode 100644 index 00000000..0d804c2c --- /dev/null +++ b/docs/best-practice/demos/InputclassNames.tsx @@ -0,0 +1,36 @@ +/** + * defaultShowCode: true + */ +import { Input } from 'antd'; +import { createStyles } from 'antd-style'; + +const useStyles = createStyles(({ token, css, prefixCls }) => ({ + bg: css` + background: ${token.colorBgLayout}; + padding: 24px; + `, + input: css` + background: transparent; + `, + wrapper: css` + background: transparent; + border: 2px solid ${token.colorBorder}; + `, + suffix: css` + color: ${token.colorTextQuaternary}; + `, +})); + +export default () => { + const { styles } = useStyles(); + + return ( +
+ +
+ ); +}; diff --git a/docs/best-practice/demos/OverrideWeight.tsx b/docs/best-practice/demos/OverrideWeight.tsx new file mode 100644 index 00000000..36923986 --- /dev/null +++ b/docs/best-practice/demos/OverrideWeight.tsx @@ -0,0 +1,32 @@ +/** + * defaultShowCode: true + */ +import { App, Layout } from 'antd'; +import { createStyles } from 'antd-style'; + +const useStyles = createStyles(({ token, css, prefixCls }) => ({ + default: css` + .${prefixCls}-layout-header { + background-color: ${token.colorPrimary}; + } + `, + moreWeight: css` + // ↓ + &.${prefixCls}-layout-header { + background-color: ${token.colorPrimary}; + } + `, +})); + +export default () => { + const { styles } = useStyles(); + + return ( + + + 无法覆盖 + 可正常覆盖 + + + ); +};