在一个应用程序中将不同的标题样式应用于不同的 ag-grid 实例

Question

我在我的应用程序中使用 ag-grid，并且在同一页面上有两个网格。我想让标题的文本标签在一个网格垂直，另一个网格水平。

这是一个文档，展示了如何使一个网格的标题垂直。 https://www.ag-grid.com/javascript-grid-column-header/#textOrientation

.ag-cell-label-container {
  /*Necessary to allow for text to grow vertically*/
  height: 100%;
}

.ag-header-cell-label {
  /*Necessary to allow for text to grow vertically*/
  height: 100%;
  padding: 0 !important;
}

.ag-header-cell-label .ag-header-cell-text {
  /*Force the width corresponding at how much width
    we need once the text is laid out vertically*/
  width: 55px;
  writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  line-height: 2em;
  margin-top: 60px;
}

.ag-header-cell-label {
  font-size: 10px;
  height: 90px;
  padding-top: 36px;
  margin-left: 0px;
  color: #1b6d85;
  font-weight: bold;
}

.ag-header-cell-label .ag-header-cell-text {
  /*There is empty space left at the top from the menu and sort
    icons not used*/
  margin-top: 25px;
}

它在styles.scss 文件中添加了特定的样式。但这将适用于全球。

另一方面，如果我将这些 css 添加到 app.component.scss 文件中，它不会对文本方向进行任何更改。

有没有办法只将 css 应用于一个 ag 网格实例？

Answer 1

我也遇到过类似的情况。 我将每个网格包装成具有不同class 属性的不同divs。 通过包装 div 的类对网格进行样式设置后，您的样式应该被封装。你试过吗？ :)