Dva: 关于使用CSS Modules后覆盖antd组件样式问题

[programmer-yang]

各位大神好，我在学习dva的过程遇到了一个问题：

场景

使用Spin组件的时候高度无法继承到Spin组件子节点中

<Spin spinning={!this.props.loading}>
  <Content className={styles.content}>
    //...
  </Content>
</Spin>

问题描述

追寻原因发现是因为Spin组件的容器div的类ant-spin-nested-loading和子div的类ant-spin-container上没有高度。
比如我在Spin的外侧div高度是100%，我的Content高度也是100%，如果没有Spin，Content会继承父节点的高度，但加上Spin组件或，我的Content的父节点就是Spin的组件，这样Content就无法正常继承到高度。

解决办法（目前自己的）

我想通过样式覆盖的方式解决，在当前组件中覆盖.ant-spin-nested-loading .ant-spin-container给他们加上高度100%，让我的子容器顺利继承到高度。

问题

但是我们的配置中所有src下的css,less都配置了css-modules加载方式，因为有css-modules，我们写的所有css、less都会加上序列码区分作用域，但Spin下的div.ant-spin-nested-loading和div.ant-spin-container都是自动生成，所以自己写在组件下的覆盖样式无法覆盖（因为自己写的样式加上序列码后和自动生成的样式名称不一样），这种情况下一种解决办法就是在src外创建覆盖样式，然后手动在index.html最后导入（开发中style-loader会自动插入样式到head标签最后，如果在head导入会被后续样式覆盖）。但这种方法不是很“优雅”，查了一些别人的解决办法，我觉得有一种比较可取，就是自己再配置一个css test，比如规定src/styles/*overwrite.css不走css-modules规则，但目前自动构建出来的项目里貌似不支持。

• 请问要实现上述需求，在目前dva new app的环境下应该如何配置？

[dicklwm]

写样式的时候，加上:global，就是全局的样式的了，引入的时候就不会生成序列号

[programmer-yang]

感谢dicklwm，我之前也想到和尝试了，因为我编译器不支持

:global {
  //...
}

这样的语法，看到提示报错，导致我脑回路没转过来。