CSS在react js中不被折射。

Question

我正在试图覆盖可达的组件和少量的html元素。但是CSS不是反映在those.Here上的组件。

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>

而且这是可行的