ant design pro 覆盖自定义的css样式

需求是修改pro-layout上的header背景色。

通过css样式找到了header的css名字为

ant-pro-global-header

发现在src/components/GlobalHeader/index.less的样式中有这个名字的代码，

本地测试没有问题，发布到容器上之后不起效。发现这个样式被覆盖了。顶层还有.ant-pro-global-header-layout-mix

这个index.js中继续添加这个的样式。依然是在生产环境不生效

最后看了这个GitHub的代码https://github.com/TencentCloudBase/cloudbase-extension-cms/commit/811e9a02bfc24cdf027a09fd7f8ab5cba7a43a87

修改了src/global.less。所以按照他的格式添加了一下，生产环境中可以显示了

@@@@@@@@@

还有一种情况，是相对反过来的情况，当src/global.less中有相关样式需要修改的话，如果在子页面的less修改样式是不会生效的。如果想在子页面修改对应的样式

1、删除在src/global.less中的样式（保证在别的子页没有用到）。在自己是less中，使用globa（class名称）l对样式进行修改。

@@@@@@@@@0825修改

在修改对应class样式的地方，需要找到class的最最小的范围