React+TS+SCSS项目中如何用自定义类覆盖TreeTable的viewport高度

要覆盖外部TreeTable组件中cp-tree-table_viewport类的height属性，你可以利用SCSS的后代选择器，通过自定义容器类my-tree-table精准定位目标样式类，借助CSS优先级规则覆盖原有样式，具体实现如下：

基础实现（未使用CSS Modules场景） #

.my-tree-table {
  // 通过后代选择器定位到嵌套的cp-tree-table_viewport类
  .cp-tree-table_viewport {
    // 替换为你需要的高度值，比如500px
    height: 500px;
  }
}

CSS Modules适配场景 #

如果你的React项目启用了CSS Modules（样式文件命名为xxx.module.scss），需要用:global()包裹外部组件的类名，避免被模块化转换：

.my-tree-table {
  :global(.cp-tree-table_viewport) {
    height: 500px;
  }
}

额外注意事项 #

• 优先级验证：如果原有样式没被覆盖，打开浏览器开发者工具（F12）查看cp-tree-table_viewport元素的样式面板，确认原有样式的优先级。如果原有样式用了!important，你可能需要在自己的样式后加上!important（尽量优先通过提升选择器优先级解决，减少!important的使用）。
• 结构确认：确保cp-tree-table_viewport确实是my-tree-table容器的后代元素，避免选择器层级错误。

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