Как сохранять стили в React?

Question

[lena_tihonova_bl]

Есть некоторый div со своими CSS-свойствами (в данном случае – padding-top):

<div className="loader_div" style={loader_div_style}>
    <div className="loader"></div>
</div>

.loader_div {
    padding-top: 2.5%;
}

Но этот паддинг задаётся в файле style.css, когда как существует ещё стейт loader_div_style, который отвечает только за переключение дисплея с inline на none в нужных моментах. И проблема заключается в том, что эти 2 набора стилей, прикреплённых к одному элементу, не могут сосуществовать – отступ перестаёт работать.

Подскажите, пожалуйста, как это можно исправить? Разве убрать padding-top из файла и добавить в стейт – это выход? Таких свойств ведь может быть много...

Answer 1

[alubochkin]

На мой вгляд странно но я так не делал, может так сделаете

const [hide, setHide] = useState(false);

<div className={"loader_div".concat(hide ? ' hide' : '')}>
    <div className="loader"></div>
</div>

.loader_div {
    padding-top: 2.5%;
}
.hide {
    display: none;
}