React-bootstrap-table2: text overlap after import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'

[AliceChang-99]

Question
text overlap after
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'

If remove this import, there will be no sort icon shown up.
How to correctly show icon and avoid text overlap at the same time?

codesandbox
https://codesandbox.io/s/react-bootstrap-table-2-ii9g8

[Ymbere]

Hi the import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css' it's not necessary, but the missing sort icons seem to be a bug, I didn't found the root cause yet, but you can use this workaround for now.

th .order-4:before {
    margin-left: 3.5px;
    content: "\2191";
    opacity: 0.4;
}

th .order-4:after {
    content: "\2193";
    opacity: 0.4;
}

th .caret-4-asc:before {
    margin-left: 3.5px;
    content: "\2191";
}

th .caret-4-asc:after {
    content: "\2193";
    opacity: 0.4;
}

th .caret-4-desc:before {
    margin-left: 3.5px;
    content: "\2191";
    opacity: 0.4;
}

th .caret-4-desc:after {
    content: "\2193";
}

Here a example