ant-design / cssinjs

https://ant-design.github.io/cssinjs
MIT License
236 stars 59 forks source link

使用 legacyLogicalPropertiesTransformer ProLayout aside组件submenu样式显示出现问题 #92

Open wangs1203 opened 1 year ago

wangs1203 commented 1 year ago

packages: "@ant-design/cssinjs": "^1.5.6", "@ant-design/pro-components": "^2.3.57", "antd": "^5.2.2",

image image

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>
  );
}