Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 [BUG]使用最新版本的ant-design pro创建的项目,layout: 'mix',并设置headerTheme: 'dark',头部还是白色背景。 #11429

Closed
imgoby opened this issue Feb 7, 2025 · 1 comment

Comments

@imgoby
Copy link

imgoby commented Feb 7, 2025

🐛 bug 描述

使用最新版本的ant-design pro创建的项目,layout: 'mix',并设置headerTheme: 'dark',头部还是白色背景。

"dependencies": {
    "@ant-design/icons": "^4.8.1",
    "@ant-design/plots": "^2.1.5",
    "@ant-design/pro-components": "^2.6.44",
    "@antv/l7": "^2.20.13",
    "@antv/l7-maps": "^2.20.13",
    "@antv/l7-react": "^2.4.3",
    "@umijs/route-utils": "^2.2.2",
    "antd": "^5.12.7",
    "antd-style": "^3.6.1",
    "classnames": "^2.5.1",
    "dayjs": "^1.11.10",
    "numeral": "^2.0.6",
    "omit.js": "^2.0.2",
    "querystring": "^0.2.1",
    "rc-util": "^5.38.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fittext": "^1.0.0",

  },
  "devDependencies": {
    "@ant-design/pro-cli": "^2.1.5",
    "@testing-library/react": "^13.4.0",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/classnames": "^2.3.1",
    "@types/express": "^4.17.21",
    "@types/history": "^4.7.11",
    "@types/jest": "^29.5.11",
    "@types/lodash": "^4.14.202",
    "@types/lodash.debounce": "^4.0.9",
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18",
    "@types/react-helmet": "^6.1.11",
    "@umijs/fabric": "^2.14.1",
    "@umijs/lint": "^4.1.0",
    "@umijs/max": "^4.1.0",

📷 复现步骤 | Recurrence steps

(1)参考:https://pro.ant.design/zh-CN/docs/getting-started/ 创建项目
(2)设置:

name: '暗色主菜单+亮色子菜单',
      colorPrimary: '#1890ff',  // 拂晓蓝
      navTheme: 'dark',
      layout: 'mix',
      contentWidth: 'Fluid',
      fixedHeader: true,
      fixSiderbar: true,
      splitMenus: true,
      headerTheme: 'dark',
      customColors:{
      }

Image

🏞 期望结果 | Expected results

期望header为黑色背景

© 版本信息

  • Ant Design Pro 版本: "antd": "^5.12.7",
@imgoby
Copy link
Author

imgoby commented Feb 7, 2025

解决方法:
参考:https://procomponents.ant.design/components/layout?tab=api#packages-layout-src-components-layout-tab-api-demo-classicmode


import { ProLayoutProps } from '@ant-design/pro-components';

/**
 * @name
 */
const Settings: ProLayoutProps & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  colorPrimary: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: 'Ant Design Pro',
  pwa: true,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
  token: {
    // 参见ts声明,demo 见文档,通过token 修改样式
    //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F

    
    header: {
      colorBgHeader: '#292f33',
      colorHeaderTitle: '#fff',
      colorTextMenu: '#dfdfdf',
      colorTextMenuSecondary: '#dfdfdf',
      colorTextMenuSelected: '#fff',
      colorBgMenuItemSelected: '#22272b',
      colorTextMenuActive: 'rgba(255,255,255,0.85)',
      colorTextRightActionsItem: '#dfdfdf',
    }
  },
};

export default Settings;

@imgoby imgoby closed this as completed Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant