如何在AntD中使用嵌套模块样式？解决Tabs子元素样式失效问题

问题出在CSS Modules的局部作用域特性：你的.tabs类会被CSS Modules添加唯一哈希后缀（比如变成.tabs_abc123），而直接嵌套的.ant-tabs-content也会被当成局部类处理，编译后会生成类似.tabs_abc123 .ant-tabs-content_def456的选择器，但AntD渲染出的DOM上，内容容器的类名还是全局的.ant-tabs-content，两者不匹配，所以样式无法生效。

解决方法很简单，用CSS Modules提供的:global()语法包裹AntD的全局类名，这样该类名不会被添加哈希后缀，能正确匹配到DOM元素：

.tabs {
  flex-grow: 1;
  padding: 0 16px;

  :global(.ant-tabs-content) {
    height: 100%;
  }
}

这种写法还能限定作用域——只会让样式作用在当前.tabs容器下的.ant-tabs-content元素上，不会影响页面中其他AntD Tabs的内容容器样式。

内容的提问来源于stack exchange，提问作者ivan239