feat: App support cssVar (#45806)

* feat: App support cssVar

* fix: fix

* fix: fix

* Apply suggestions from code review

Signed-off-by: MadCcc <1075746765@qq.com>

* Update components/app/style/index.ts

Signed-off-by: MadCcc <1075746765@qq.com>

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
lijianan 2023-11-13 15:34:37 +08:00 committed by GitHub
parent a53041f079
commit 684bb15258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 4 deletions

View File

@ -11,6 +11,7 @@ import useNotification from '../notification/useNotification';
import type { AppConfig, useAppProps } from './context';
import AppContext, { AppConfigContext } from './context';
import useStyle from './style';
import useCSSVar from './style/cssVar';
export interface AppProps<P = AnyObject> extends AppConfig {
style?: React.CSSProperties;
@ -36,7 +37,8 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
} = props;
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('app', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const customClassName = classNames(hashId, prefixCls, className, rootClassName);
const appConfig = useContext<AppConfig>(AppConfigContext);
@ -71,7 +73,7 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
style,
};
return wrapSSR(
return wrapCSSVar(
<AppContext.Provider value={memoizedContextValue}>
<AppConfigContext.Provider value={mergedAppConfig}>
<Component {...(component === false ? undefined : rootProps)}>

View File

@ -0,0 +1,4 @@
import { prepareComponentToken } from '.';
import { genCSSVarRegister } from '../../theme/internal';
export default genCSSVarRegister<'App'>('App', prepareComponentToken);

View File

@ -1,4 +1,4 @@
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
export type ComponentToken = {};
@ -18,5 +18,7 @@ const genBaseStyle: GenerateStyle<AppToken> = (token) => {
};
};
export const prepareComponentToken: GetDefaultToken<'App'> = () => ({});
// ============================== Export ==============================
export default genComponentStyleHook('App', (token) => [genBaseStyle(token)]);
export default genComponentStyleHook<'App'>('App', genBaseStyle, prepareComponentToken);