Применение разных стилей заголовков к разным экземплярам ag-grid в одном приложении

Question

Я использую ag-grid в своем приложении, и у меня две сетки на одной странице. Я хотел бы сделать текстовую метку для заголовка в одной сетке вертикальной, а другую - горизонтальной.

Вот пример c, показывающий, как сделать заголовок вертикальным для одной сетки. 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;
}

Добавлены определенные c стили в файл styles.s css. Но это будет применяться глобально.

С другой стороны, ориентация текста не изменится, если я добавлю эти css в файл app.component.s css.

Есть ли способ применить css только к одному экземпляру ag grid?

Answer 1

У меня был похожий случай. Я обернул каждую сетку в разные divs с разными атрибутами class. После того, как вы стилизуете сетку по классу оборачивающего div, ваши стили должны быть инкапсулированы. Вы пробовали это? :)