[主题颜色错误]主题相关覆盖错误问题集中反馈

[sendya]

theme-color-replacer 问题统一汇总

Describe the bug
webpack-theme-color-replacer plguin
replacer class selector error

Screenshots

• 1. a-step 组件 active 状态步下 文字颜色被覆盖
  

---

• 2. 日期组件 选择当天时，文字颜色被覆盖
  

---

• 3. 主题为 light 并且为顶部导航模式时，仅一级菜单下 菜单文字颜色无法被覆盖
  

Desktop (please complete the following information):

• OS: Windwos/macOS
• Browser: Chrome latest
• Version: 2.0.1 - master

Additional context
fix class selector

ref: #261
ref: #343

[sendya]

@hzsrc 这两个问题，直接利用 changeSelector 也无法解决，你看下什么方案处理

[free-pan]

看下 #317 里说的方法是否可行? 至少暂时来说, 日期选择是没问题了(就是不知道,注释掉的地方, 会不会对其它地方产生影响). 这个步骤表单是否也可以采用类似方式?

[hzsrc]

刚拉最新代码看了，已经解决了？

changeSelector 应该能解决，就是写法比较怪异。如果能从css源头上控制优先级是最好的，不过对第三方库，也只好用这办法

[sendya]

ref #343

[free-pan]

8月26日master版本,使用build:preview方式打包(之所以采用该方式打包, 是因为我需要主题动态切换的功能), 没有子菜单的根菜单, 在顶部导航栏模式下,样式出现问题

{
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: { title: '首页' },
    redirect: '/dashboard/workplace',
    children: [
       // 单页1
       {
        path: '/s1-dashboard/analysis',
        name: 'S1-Analysis',
        component: () => import('@/views/dashboard/Analysis'),
        meta: { title: '单页一', keepAlive: false, permission: [ 'dashboard' ] }
      },

      // 单页2
      {
        path: '/s2-list',
        name: 's2-list',
        component: PageView,
        redirect: '/s2-list/table-list',
        hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
        meta: { title: '单页2', icon: 'table', permission: [ 'table' ] },
        children: [
          {
            path: '/s2-list/table-list/:pageNo([1-9]\\d*)?',
            name: 's2-TableListWrapper',
            component: () => import('@/views/list/TableList'),
            meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ], hidden: true }
          }
        ]
      },

```其它配置

造成这个的表面原因是.ant-menu-horizontal>.ant-menu-item-selected>a的优先级, 大于.ant-menu-dark .ant-menu-item-selected>a, .ant-menu-dark .ant-menu-item-selected>a:hover的优先级

我现在的解决办法是
在src/index.less文件重定义如下样式, 使选定的a元素的样式优先级高于.ant-menu-horizontal>.ant-menu-item-selected>a这个, 达到样式覆盖的目的

.ant-menu-dark .ant-menu-item-selected>a.router-link-active {
  color: #fff;
}
.ant-menu-dark .ant-menu-item-selected>a.router-link-active:hover {
  color: #fff;
}

不知道有没有更好的解决办法?

[sendya]

@free-pan preview 不会给用户使用，这个只会在我的 预览项目上部署，用户打包都是 prod 不存在能够在线更新主题的功能。既这个问题不会被复现

另外，尝试在 https://github.com/sendya/ant-design-pro-vue/blob/master/config/plugin.config.js#L17 下加规则也可以让 css 优先级改变

[iota9star]

@sendya @hzsrc

问题

按钮主题色有点问题，切换主题以后hover按钮，button 字体颜色和outline颜色没对 😤
代码如下

期望

实际

[sendya]

@iota9star fixed 7e9e22a

[iota9star]

@sendya 👍👍👍

[iota9star]

@sendya

问题

输入框box-shadow有点问题

期望

box-shadow颜色与主题色配套

实际

[free-pan]

@iota9star

可以试着在global.less新增

.ant-input:focus {
  border-color: #40a9ff;
  outline: 0;
  box-shadow: 0 0 0 2px color('@{primary-color}20');
  border-right-width: 1px !important;
}

[hzsrc]

@iota9star #465

[iisquare]

SettingDrawer选中“色弱模式”，关闭后没有正确隐藏，通过拖动底部滚动条，在页面右部可以看到，取消“色弱模式”页面恢复正常。
#694

[ice-bin-ux]

前端小白，想使用官方的dark主题，如何进行实现，尝试了官方的步骤但不起作用。谢谢

[ZhongMingKun]

问题
type='link'的button在hover、focus、active时出现border

期望
type='link'的button在hover、focus、active时不出现border

实际

[QZRS]

问题
vue.config.js publicPath配置不为"/"时。主题色切换失效
方案



保持publicPath与主题色css文件路径一致