CSS 没有反映在 react js 中

Posted 2023-02-23

【中文标题】CSS 没有反映在 react js 中

【英文标题】：CSS is not refleted in 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 的特殊性，类样式不适用。

如果我内联应用它就可以工作

【参考方案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>

这行得通