search

ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.12k stars 1.32k forks source link

🧐[问题]如何修改pro-component的样式 #8467

Open xclw2000 opened 1 month ago

xclw2000 commented 1 month ago

🧐 问题描述 | Problem description

使用 pro-cli 建的项目 我想修改所有的ProCard的标题颜色 通过查看源码

 [`${componentCls}-title`]: {
        color: token.colorText,
        fontWeight: 500,
        fontSize: token.fontSizeLG,
        lineHeight: token.lineHeight,
      }

得知文本颜色是从token.colorText取的, 于是在config.ts中作如下配置

antd: {
    configProvider: {
      theme: {
        cssVar: true,
        components: {
          ProCard: {
            colorText: 'red',
          },
        },
      },
    },
  }

发现这种方式无法修改文字的颜色 接着尝试如下配置，加一层token

  antd: {
    configProvider: {
      theme: {
        cssVar: true,
        components: {
          ProCard: {
            token: {
              colorText: 'red',
            },
          },
        },
      },
    },
  },

仍然不生效，请问这里的配置应该怎么写？

chenshuai2144 commented 1 month ago

用的是card的配置 没专门搞了个procard

xclw2000 commented 1 month ago

我设置了Card，但仍然不生效

  antd: {
    configProvider: {
      theme: {
        components: {
          Card: {
            colorText: 'red',
          },
          ProCard: {
            colorText: 'red',
          },
        },
      },
    },
  },

生成的style里仍然是黑色

.ant-pro-card .ant-pro-card-title {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5714285714285714;
}

image

通过查看Card的源码，发现在影响Card的token是colorTextHeading，于是做以下修改

  antd: {
    configProvider: {
      theme: {
        components: {
          Card: {
            colorTextHeading: 'green',            
          },
          ProCard: {
            colorTextHeading: 'blue'            
          },
        },
      },
    },
  },

发现只能对Card生效，对ProCard不生效 image

amusiq commented 1 month ago

same here

uniquejava commented 3 weeks ago

借个楼, collapse-button 的颜色哪里改, 我想调成主题色 (蓝 -> 深绿), 和左边的 primary button 不太协调

image
uniquejava commented 3 weeks ago

啊. 我发现边边角角的很多地方的颜色都是蓝色, 都不是根据 PrimaryColor 计算出来的

image