CSS 没有反映在 react js 中答案

【问题标题】：CSS is not refleted in react jsCSS 没有反映在 react js 中
【发布时间】：2019-09-20 22:44:30
【问题描述】：

我正在尝试覆盖 reacstrap 组件以及一些 html 元素。但是 CSS 并没有反映在这些上。这是组件。

const DeleteKpiModal = ({isOpen, kpiToDelete, toggle, handleDeleteKpi}) => (
    <Modal isOpen={isOpen} toggle={() => toggle(null)}>
    <ModalBody>
      <h2 className="heading-style">Delete KPI?</h2>
    <p className="delete-content">
    Are you sure you want to delete this?
    Once deleted, the data will be lost and will not be able to be recovered.
    </p>
      </ModalBody>
    <ModalFooter className="display-button">
      <Button className="delete-button" size="md" block onClick={() => handleDeleteKpi(kpiToDelete)}>Delete</Button>
      <Button className="cancel-button" color="secondary" size="md" block  onClick={() => toggle(null)}>Cancel</Button>
    </ModalFooter>
    <style jsx>{styles}</style>
  </Modal>
  )

这里是 Css。忘记这里的导入，我正在使用 sass/scss 这样做。

const styles = scss`

  @import "bootstrap-extended/jsx-import";
  $bg-red: #e04c33;

  .delete-button{
    background-color: $bg-red;
    color:#fff;
  }
  .delete-content{
    borderBottom:1px dashed #dce1e5;
    paddingBottom:3rem;
  }
  .heading-style{
    color: $bg-red;
  }
  .cancel-button{
    backgroundColor:#fff;
    color:#047adc;
    border:2px solid #047adc;
    marginLeft:0;
  }
  .display-button{
    display:initial;
    padding-top:0;
  }
`

请帮助我在哪里做错了。

【问题讨论】：

可以提供密码箱吗？
这对我来说是不可能的。因为这是一个长代码。虽然我提供的细节从我的角度来说已经足够了。
看，这也是关于重现错误的问题，现在我只能猜测由于 css 的特殊性，类样式不适用。
如果我内联应用它就可以工作

标签： css reactjs sass components reactstrap

【解决方案1】：

我是这样申请的。我为上层组件创建了一个类并像这样使用它。

<style jsx global>{`
$bg-red: #e04c33;

.delete-kpi-modal{
  .delete-button{
    background-color: $bg-red;
    color:#fff;
  }
  .delete-content{
    border-bottom:1px dashed #dce1e5;
    padding-bottom:3rem;
  }
  .heading-style{
    color: $bg-red;
    text-align:center;
  }
  .cancel-button{
    background-color:#fff;
    color:#047adc;
    border:2px solid #047adc;
    margin-left:0;
  }
  .display-button{
    display:initial;
    padding-top:0;
  }
}
`
    }
    </style>

这行得通

【讨论】：