react-data-grid - Is it possible to eliminate the blue border when selecting cells?

Question

I am trying to remove the blue border that appears when you click a cell when using react-data-grid. Is this possible, or will I have to create a pull request?

Answer 1

搜索.rdg-selected。React Data Grid 为所谓的cell-mask使用绝对定位的额外 div 。

.rdg-selected {
    border: 2px solid #66afe9;
}

单元格掩码如下所示：

<div tabindex="0">
   <div data-test="cell-mask" class="rdg-selected" style="height: 35px; width: 256px; z-index: 5; position: absolute; pointer-events: none; transform: translate(256px, 0px);"> 
   </div>
</div>

如果您想摆脱蓝色边框，请将此元素的边框设置为无：

.rdg-selected {
    /* border: 2px solid #66afe9; */
    border: none;
}

或者给它一个透明的边框颜色：

.rdg-selected {
    /* border: 2px solid #66afe9; */
    border-color: transparent;
}

注意你的风格的特殊性。