CSS没有反射(reflect)在react js中

Question

我正在尝试覆盖 reacstrap 组件以及一些 html 元素。但是 CSS 没有反射(reflect)在那些上。这是组件。

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;
  }
`

请帮助我哪里做错了。

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

这行得通