'Css not updating react component

   /* Here is my container in my react component */
   <Container fluid className="graph-container">
      <Tabs
        id="graph-buttons"
        variant={"pills"}
      >
        <Tab id="line-tab" eventKey="line" title="Line">
          <Content greeting={"line"} />
        </Tab>
        <Tab id="bar-tab" eventKey="otherline" title="OtherLine">
          <Content greeting={"bar"} />
        </Tab>
        <Tab id="doughnut-tab" eventKey="doughnut" title="Doughnut">
          <Content greeting={"doughnut"} />
        </Tab>
      </Tabs>
    </Container>

 /* Here is my CSS for the above component */
.graph-container{
  background: black;
}

#graph-buttons{
  margin-top: 50px;
}

#line-tab{
  font-family: 'Courier New', Courier, monospace;
  color: red;
  background: red;
}

The .graph-container is being changed with the CSS but for some reason, the CSS does not link with anything inside the Tabs part. What could be the reason for this? Thanks for the help!

javascriptcssreactjsreact-bootstrap


Solution 1:[1]

The <Container> is overriding the styles that you have specified. You could try adding !important after the styles, like below:

.graph-container{
  background: black !important;
}

Or try adding inline styles, like below:

<Container fluid style={{background: 'black'}}>
  <Tabs
    id="graph-buttons"
    variant={"pills"}
  >
    <Tab id="line-tab" eventKey="line" title="Line">
      <Content greeting={"line"} />
    </Tab>
    <Tab id="bar-tab" eventKey="otherline" title="OtherLine">
      <Content greeting={"bar"} />
    </Tab>
    <Tab id="doughnut-tab" eventKey="doughnut" title="Doughnut">
      <Content greeting={"doughnut"} />
    </Tab>
  </Tabs>
</Container>

Hope this helps. Let me know if it works.

Solution 2:[2]

This was the first question that came up when searching "react css not updating stackoverflow" so I will post it in hopes of helping someone else.

I was changing things in my css file and nothing was changing on the page. The problem turned out to be that I was using the same css class names in different components. This caused the css of whichever component loaded first to be the css that applied on the rest of the elements in the other components with the duplicate class name... I spent an embarrassing amount of time figuring this out.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Soumya Ranjan Swain
Solution 2

Related Questions