angular - 使用 VMWare Clarity Design 和 Angular2+ 隐藏可扩展数据网格上的插入符号列

Question

我正在使用VMWare Clarity Datagrid组件。

描述:

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

我的目标:

1. 隐藏右侧数据网格上的插入符号列，但仍然可以展开其行。当我在浏览器中的 .datagrid .datagrid-expandable-caret 类中添加 display: none; 规则时，它工作正常，但在 .scss 文件中却不起作用.
2. 隐藏左侧数据网格的滚动(红色)，但仍然可以滚动。
3. 同步两个数据网格的滚动(可能使用第三方代码)。

这里我做了一个plunker以 angular2+ 中的示例为例。

.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 个等效的解决方案:

1. 将这些样式放在全局 CSS 样式表中，以便它们可以应用于“模拟”影子 DOM。
2. 在组件上使用encapsulation: ViewEncapsulation.None 可以获得相同的结果。

这是您的插件的更新版本，显示了第二个解决方案的工作情况:https://plnkr.co/edit/ss3y1P?p=preview