Как изменить стили библиотеки подключённой к React без !important?

Question

[Daniil]

Я подключил библиотеку https://www.npmjs.com/package/react-verification-c... в React. Мне не понравились стили захотел их изменить. В тех классах на которых строилась библиотека я их изменил и поставил !important. Всё работает но со сторону кода это не правильно. Как можно изменить стили без !important?

import ReactCodeInput from 'react-verification-code-input';
<div className="styles_react-code-input__CRulA">
  <ReactCodeInput 
    type="number" 
    fields={4} 
    fieldWidth={22} 
    fieldHeight={40} />
</div>

Вот код CSS (SASS) :

.styles_react-code-input__CRulA {
  width: 350px;
  input:first-child {
      border-top-left-radius: 0px  !important;
      border-bottom-left-radius:0px !important;
      margin-right: 5px;
  }
  input:nth-child(2){
      margin-right: 5px;
  }
  input:last-child {
      border-right: none !important;
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px  !important;
      margin-left: 5px;
  }
  input{
      border-right: none !important ;
      border-left: none !important ;
      border-top: none !important ;
      font-family: inherit !important;
      caret-color: black !important;
}
}

Answer 1

[t800zippygod]

Смотрите , тут два варианта. 1) Библиотека записывает стили инлайново, то есть через Element.classList.add(). В таком случае эти стили имеют наивысший приоритет, и тут можно: перезаписать стили вручную через js; либо же оставлять !important.
2) Библиотека имеет набор готовых css стилей, которые через js лишь присваиваются элементам. Тогда надо смотреть, в каком стиле прописаны нежелательные характеристики. И переписывать их в своём css файле.
Важно, чтобы в этом случае ваш css файл подключался после библиотечного

Comments

[Daniil]

Спасибо большое .