Я создаю статические компоненты, и хотела сделать так, чтобы при создании компонентов можно было предавать некоторые параметры. К примеры, я создаю заголовок и в пропсы передаю размер шрифта, жирный или нет и т.д.
Вот мой компонент.
import React from 'react'
const Heading = ({children, ...props}) => {
return (
<div style={{ fontSize: Number(props.fontsize)}}>
{children}
</div>
)
}
export default Heading
А вот я вызываю компонент
<Heading fontsize="24" bold={true} >Hello </Heading>
И я знаю что инлайн стили не есть хорошо, именно поэтому мне хотелось бы стили передавать по другому, но как это сделать? Я думала создать отдельный файл Heading.css и все стили прописывать там, но не знаю как пропсы передать туда. И является ли это правильным решением. Как лучше всего поступить в этом случае?