Менять стилизацию компонента пропсами или css переменными?
У меня есть компонент и при определённых брейкпоинтах нужно менять его стилизацию. Я вижу 2 возможных, вроде как плюс минус нормальных варианта, но пока не могу понять у какого больше удобства.
- через пропсы :
<InfoBlock
options={{
iconWidth: 100,
iconMargin: 50,
color: 'red',
breakpoints: {
991: {
iconWidth: 50,
iconMargin: 25
},
767: {
iconWidth: 20,
color: 'brown'
}
}
}}
/>т.е. при таком раскладе я по сути внутри самого компонента крутить полученные пропсы как угодно и изменять что необходимо.
- изменять стилизацию компонента через css переменные
.info-block {
--icon-width: 100px;
--icon-margin: 50px;
--color: red;
@media (max-width: 991px) {
--icon-width: 50px;
--icon-margin: 25px;
}
@media (max-width: 767px) {
--icon-width: 20px;
--color: brown;
}
}<InfoBlock className="info-block"/>Оба варианта рабочие, и не знаю, стоит ли изменение css свойств запихивать в пропсы, хотелось услышать мнение ещё кого-то по этому поводу.