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

Question

使用react-bootstrap-table-next，当我单击列标题时，单击的标题周围会出现边框

有什么方法可以禁用此功能吗？

 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;        
    }
}

然后在包含表的类中：

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;
}