时间戳

首页 > 解决方案 > CSS不更新反应组件

javascript - CSS不更新反应组件

问题描述

   /* 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-container 正在使用 CSS 进行更改，但由于某种原因，CSS 未与 Tabs 部分内的任何内容链接。这可能是什么原因？谢谢您的帮助！

标签： javascriptcssreactjsreact-bootstrap

解决方案

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

希望这可以帮助。让我知道它是否有效。

推荐阅读