Open luocong2016 opened 1 year ago
menuRender={false}
报错// [Vue warn]: Invalid prop: type check failed for prop "menuRender".
// Expected Object | Function, got Boolean with value false.)
// GlobalHeader/headerProps.ts ,false 报错;原因缺少 Boolean
menuRender: {
type: [Object, Function, Boolean] as PropType<
WithFalse<(props: ProProps /* HeaderViewProps */, defaultDom: CustomRender) => CustomRender>
>,
default: () => undefined,
},
headerTheme="dark"
// src/components/GlobalHeader/index.less
// line:15 background: @pro-layout-header-bg; 需要替换
background: transparent; // 或更改变量默认值 transparent
详细分析,这里还是有明显问题
// ant-design-vue 中 /components/style/themes/default.less
@component-background: #fff;
很多组件因@component-background
变量遮挡,无法显示正确的主题色
如:".ant-pro-layout-page-container",
引用明细: https://github.com/vueComponent/pro-components/search?l=Less&q=component-background&type=
navTheme
没转换成 theme
// /components/SiderMenu/index.tsx
<SiderMenu {...attrs} {...props} theme={headerTheme as 'light' | 'dark'}
navTheme
无法更改全局的主题,只更改了部分菜单(sider)。siderMenuType?: "sub" | "group";
// 顺序调了好几次都只能这样,切换主题各种样式错误
@import url('@ant-design-vue/pro-layout/dist/style.less');
@import url("ant-design-vue/dist/antd.variable.min.css");
"theme:pro-dark": "lessc --js --modify-var=\"ant-prefix=custom-dark\" node_modules/@ant-design-vue/pro-layout/dist/style.less src/styles/pro-theme-dark.css",
"theme:dark": "lessc --js --modify-var=\"ant-prefix=custom-dark\" node_modules/ant-design-vue/dist/antd.variable.less src/styles/theme-dark.css",
样式混乱
"prefixCls" 其实是写入的,但渲染的是错误的。看了下代码,发现是有些用的是 pros,有些是非计算变量 所以造成了很多组件不一致。
<layout prefixCls={xxx} /> <Sider prefixCls={xxx} />
ConfigProvider.config
静态方法构建主题方案建议不要直接用这个包,因为很多地方需要更改。 目前的感受是和 react 版本差距有点大,如果需要使用,建议拷贝到项目直接改吧。
🥰 需求描述 Description of Requirement
🧐 解决方案 Solution
配置和实现有冲突,样式也有些问题
🚑 其他信息 Other information