cssinjs
cssinjs copied to clipboard
使用 legacyLogicalPropertiesTransformer ProLayout aside组件submenu样式显示出现问题
packages: "@ant-design/cssinjs": "^1.5.6", "@ant-design/pro-components": "^2.3.57", "antd": "^5.2.2",
use:
import { ConfigProvider, theme } from 'antd';
import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import { PRIMARY_ACTIVE_COLOR, PRIMARY_COLOR } from '@/constants/color';
const ANTDLocaleMap = {
'zh-CN': zhCN,
'en-US': enUS,
};
export default function AntdConfigProvider({
language,
children,
}: {
language: string;
children: React.ReactElement;
}) {
return (
<ConfigProvider
theme={{
token: {
colorPrimary: PRIMARY_COLOR,
colorLink: PRIMARY_COLOR,
colorLinkHover: PRIMARY_ACTIVE_COLOR,
colorLinkActive: PRIMARY_ACTIVE_COLOR,
colorBgLayout: '#fff',
},
components: {
Layout: {
colorBgHeader: 'linear-gradient(180deg, #248668, #11604D)',
colorText: '#fff',
controlHeight: 60,
},
Tree: {
colorText: PRIMARY_COLOR,
},
},
algorithm: theme.defaultAlgorithm,
}}
locale={ANTDLocaleMap[language]}
componentSize="middle"
virtual
>
<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>{children}</StyleProvider>
</ConfigProvider>
);
}