I have imported a Table component from react-bootstrap and want to use this in my project. However, I find it very difficult to override the default styling of this component. The only way I have figured out to do this is by adding !important to the end of every line, however I'm thinking there must be a better way.
This is what my Table component looks like:
<Table striped bordered hover>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</Table>
And this is what my CSS file looks like:
th {
text-align: center;
border: none !important;
}
And without the !important it tries to keep the border (one of many cases).
That's just how pre-styled component libraries work; they usually have a higher specificity for css than just a single layer like you have. A pseudo example would be:
table {
thead {
tr {
th {
border: 1 px solid black;
}
}
}
}
Which outranks your single nested css target. !important should only be used when absolutely necessary (IMO). Another option is to write your own, equally specific css and use that to override what react-bootstrap provides. It's just a price you pay for using libraries like that.