How to remove border on column click, react-bootstrap-table-next

Question

Using react-bootstrap-table-next, when I click the column header, a border appears around the clicked header

Is there any way to disable this?

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

live example here 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

WHAT I ENDED UP DOING:

new .scss file, tableStyle.scss

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

Then in the class containing the table:

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

Answer 1

Maybe this will be solution:

.classname:focus {
    outline: none;
}