Css не обновляется компонент реакции

Question

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

Контейнер .graph заменяется на CSS, но по какой-то причине CSS не связывается ни с чем внутри части вкладок. Что могло быть причиной этого? Спасибо за помощь!

Answer 1

<Container> заменяет указанные вами стили. Вы можете попробовать добавить !important после стилей, как показано ниже:

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

Или попробуйте добавить встроенные стили, как показано ниже:

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

Надеюсь, это поможет. Дайте мне знать, если это сработает.