My CSS is overriding a bootstrap table in React

Question

Inside my react project, inside my index.css, I have

*{
    background-color: black;
    color: white;
}

to give the entire website a dark theme. However, when I create a table like this with react-bootstrap:

<Table striped bordered variant="dark">
    <th></th>
    // etc. 
</Table>

my index.css file overrides this and keeps the table completely black, instead of having it like how I want it, which can be found here.

How would I stop this from happening? Thanks!

* is a wildcard and basically means every element you make will have "background-color: black". It overrides the bootstrap styles. — havardsj
– havardsj, Commented Jan 10, 2021 at 2:59
I would put all my html inside a div with a class called something like container or content. Then change the wildcard selector to that class instead. Basically using anything other than wildcard will fix it. — havardsj
– havardsj, Commented Jan 10, 2021 at 3:03

Dominic van der Pas · Accepted Answer · 2021-01-10 03:06:11Z

1

As already mentioned, the * is a wildcard that applies to every element.

In your HTML, the bulk of your code should be within the <body></body> tags, and so you should use the following CSS:

body {
  background-color: black;
  color: white;
}

answered Jan 10, 2021 at 3:06

1428 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1