如何在 ag-grid 固定列上放置阴影答案

【问题标题】：How to put a shadow on ag-grid fixed columns如何在 ag-grid 固定列上放置阴影
【发布时间】：2023-02-02 01:26:25
【问题描述】：

我试图像这样在 ag-grid 固定列上放置阴影，但它什么也没做：

.ag-pinned-left-cols-container {
  box-shadow: inset 10px 0 8px 8px rgb(0 0 0 / 15%);
}

如何在固定列上添加阴影，使其沿着固定列垂直移动（包括标题和正文）？

【问题讨论】：

标签： reactjs ag-grid

【解决方案1】：

我需要这样做，以便我们可以知道这些是固定的列，这就是我的做法：

对于固定在左侧的列：

.ag-header .ag-pinned-left-header,
.ag-body-viewport .ag-pinned-left-cols-container {
    position: relative;
    z-index: 1;
    -webkit-box-shadow: 9px 1px 15px -4px rgba(0, 0, 0, 0.1);
    box-shadow: 9px 1px 15px -4px rgba(0, 0, 0, 0.1);
}

对于固定在右侧的列：

.ag-header .ag-pinned-right-header,
.ag-body-viewport .ag-pinned-right-cols-container {
    position: relative;
    z-index: 1;
    -webkit-box-shadow: -9px 1px 15px -4px rgba(0, 0, 0, 0.1);
    box-shadow: -9px 1px 15px -4px rgba(0, 0, 0, 0.1);
}

注意：我将它与材料主题一起使用，看起来很棒！它应该适用于所有主题，除了可以使颜色变浅的深色主题。

注 2：我必须添加“位置：相对；”和“z-index：1；”使其工作，因为单元格和行级别上有许多背景颜色，因此它应该适用于所有设置。

【讨论】：