diff --git a/CHANGELOG.md b/CHANGELOG.md index f1ff35c6..57abf9fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## [3.4.1-beta.1](https://github.com/ant-design/antd-style/compare/v3.4.0...v3.4.1-beta.1) (2023-07-02) + +### 🐛 Bug Fixes + +- 修正 prefixCls 在嵌套 ThemeProvider 中没有继承的问题 ([4e5488a](https://github.com/ant-design/antd-style/commit/4e5488a)) + # [3.4.0](https://github.com/ant-design/antd-style/compare/v3.3.0...v3.4.0) (2023-07-01) ### ✨ Features diff --git a/docs/api/theme-provider.md b/docs/api/theme-provider.md index a27becde..f32aefaa 100644 --- a/docs/api/theme-provider.md +++ b/docs/api/theme-provider.md @@ -176,6 +176,12 @@ export default () => { ::: +## 嵌套 ThemeProvider + +在某些场景下,我们会需要在一个 ThemeProvider 中嵌套另一个 ThemeProvider,这时候需要注意的是,内层的 ThemeProvider 会覆盖外层的 ThemeProvider。 + + + ## styled 集成 antd-style 通过 `styled` 方法提供了 styled-components 的 ThemeProvider 兼容能力,进而使用 antd-style 的 ThemeProvider 为 styled-components 或 emotion/styled 库提供主题消费。 diff --git a/docs/demos/ThemeProvider/nested-prefixCls.tsx b/docs/demos/ThemeProvider/nested-prefixCls.tsx new file mode 100644 index 00000000..2e45042b --- /dev/null +++ b/docs/demos/ThemeProvider/nested-prefixCls.tsx @@ -0,0 +1,34 @@ +/** + * debug: true + * iframe: true + */ +import { Button } from 'antd'; +import { ThemeProvider, createStyles } from 'antd-style'; + +const useStyles = createStyles(({ css, prefixCls }) => ({ + button: css` + .${prefixCls}-btn { + background: pink; + } + `, +})); + +const Demo = () => { + const { styles } = useStyles(); + return ( +
+ +
+ ); +}; + +const App = () => { + return ( + + + + + + ); +}; +export default App; diff --git a/package.json b/package.json index dc644801..86ecd2cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd-style", - "version": "3.4.0", + "version": "3.4.1-beta.1", "description": "a css-in-js solution for application combine with antd v5 token system and emotion", "keywords": [ "antd", diff --git a/src/factories/createThemeProvider/index.tsx b/src/factories/createThemeProvider/index.tsx index 89e09967..0e13ae2d 100644 --- a/src/factories/createThemeProvider/index.tsx +++ b/src/factories/createThemeProvider/index.tsx @@ -52,7 +52,7 @@ export const createThemeProvider = ( theme, getStaticInstance, - prefixCls, + prefixCls: outPrefixCls, staticInstanceConfig, appearance, @@ -74,10 +74,12 @@ export const createThemeProvider = ( ? createStyledThemeProvider(styled) : DefaultStyledThemeProvider || DEFAULT_THEME_PROVIDER; + const prefixCls = outPrefixCls || defaultPrefixCls; + return (