如何删除列单击边框，react-bootstrap-table-next

Question

使用 react-bootstrap-table-next，当我单击列 header 时，单击的 header

周围出现边框

有什么方法可以禁用它吗？

 import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

此处为现场示例 https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Basic%20Table&selectedStory=basic%20table&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

我最后做了什么：

新的 .scss 文件，tableStyle.scss

.noBorderOnClick {
    th:focus{      
        outline: none !important;        
    }
}

然后在class中包含table：

import tableStyle from './styles/tableStyle.scss'
<BootstrapTable keyField='id' data={ products } columns={ columns } headerClasses={tableStyle.noBorderOnClick} />

Answer 1

这是 CSS 问题，您可以使用 outline: none; 来禁用它。

Answer 2

也许这就是解决方案：

.classname:focus {
    outline: none;
}

Answer 3

这可能对您有所帮助

th:focus{
  outline: none !important;
}