CSS не отражается в реакции JS - PullRequest
Новая
       37

CSS не отражается в реакции JS

0 голосов
/ 02 мая 2019

Я пытаюсь переопределить компоненты Reactionstrap , а также несколько элементов 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;
  }
`

Пожалуйста, помогите, где я делаю неправильно.

1 Ответ

0 голосов
/ 03 мая 2019

Я подал заявку вот так.Я сделал класс для верхнего компонента и использовал его вот так. 

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

И это работает

...