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

Question

我在我的应用程序中使用ag-grid，并且在同一个页面上有两个网格。我想把一个网格中的页眉文字标签做成垂直的，而另一个网格则做成水平的。

这里有一个文档展示了如何使一个网格的页眉垂直。https:/www.ag-grid.comjavascript-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;
}

它将特定的样式添加到style.scss文件中。但这将适用于全局。

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

有沒有辦法讓css只應用在一個ag grid的實例上？

Answer 1

我有一个类似的情况。我把每个网格包装成不同的 divs 不同 class 一旦你用包装div的类来样式网格，你的样式就会被封装起来。你有试过吗 :)