使用 Angular2+ 的 VMWare Clarity Design 隐藏可扩展 Datagrid 上的插入符号列

Question

描述：

我有两个数据网格，在扩展左侧数据网格（红色）的其中一行时，我设法扩展了右侧数据网格（蓝色）。

我的目标：

隐藏右侧数据网格中的插入符号列，并且仍然能够展开其行。当我在浏览器的 .datagrid .datagrid-expandable-caret class 中添加 display: none; 规则时，它工作正常但在 .scss 文件中它没有。
隐藏左侧数据网格（红色）的滚动条，仍然可以滚动。
同步两个数据网格的滚动（可能使用第三方代码）。

这里我用angular2+的例子做了一个plunker

.right-div {
   float: left;
   height:315px;
   width: 500px;
   border: 4px solid cornflowerblue;

   .datagrid .datagrid-expandable-caret {
       padding: 2px 4px 3px;
       text-align: center;
       display: none;
   }
}

感谢您的每一个建议。

Answer 1

将它添加到您自己的组件样式时不起作用的原因是 .datagrid-expandable-caret 元素在数据网格的阴影中 DOM。有关更多说明，请参阅 https://angular.io/guide/component-styles#view-encapsulation。

这意味着你有 2 个等价的解决方案：

将这些样式放在全局 CSS 样式表中，以便它们可以应用于 "emulated" 阴影 DOM。
在您的组件上使用 encapsulation: ViewEncapsulation.None 以获得相同的结果。

这是你的 plunker 的更新版本，它显示了第二个解决方案：https://plnkr.co/edit/ss3y1P?p=preview

使用 Angular2+ 的 VMWare Clarity Design 隐藏可扩展 Datagrid 上的插入符号列

Hide the caret column on expandable Datagrid with VMWare Clarity Design with Angular2+

angular

datagrid

clarity

vmware-clarity