Вот при разработки проекта у меня сразу же возникло вполне

обычное желание вынести компоненты которые я часто использую в какую-то общую папку

но сразу же у меня возникла проблема со стилями

так, как я хочу чтобы эти вынесенные компоненты были полностью независимы и максимально переиспользуемые то стили каждого их них я пишу рядом с компонентом, на данный момент используя обычный импорт стилей

теперь, после вынесения этих компонентов и всего что их напрямую касается отдельно я столкнулся с проблемой:

что делать со стилями которые отвечают за внешнее позиционирование и в целом влияют на окружения?
(внешнее отступы, position, размещение элемента внутри грид-контейнера и т. д.)

то есть вот есть у меня какой-то компонент A, который я хотел переиспользовать и вынес в отдельно
сейчас этот компонент является полностью самодостаточен и готов к использованию на любых проектах (можно сказать что это просто независимый блок конструктора, который я могу использовать где угодно)

но проблема в том что вот есть у меня фича какая-то, которою я выразил как отдельный компонент, например Home
в этом компоненте я хочу сформировать полностью готовою страницу, где мне понадобится мой вынесенный компонент A например:

function Home() {
return (
<div>
<h1>Title</h1>
<p>Some text</p>
<A />
</div>
)
}

Но вот теперь я хочу спозиционировать это блок относительно других ИМЕННО НА ЭТОЙ СТРАНИЦЕ, например я захочу чтобы этот блок как элемент этой странице был всегда прилеплен к верху (posotion: sticky) или же сделаю эту страницу грид-контейнером и мне нужно будет прописать стили конкретно для элементы (компонента A) отдельно

так вот вопрос в том куда писать эти частные стили, а именно как мне обратится именно к этому компоненту A и изменить (добавить) его стили, например добавив дополнительный класс или как-то по другому
как и где это правильно делать чтобы не страдала независимость и переиспользуемость компонента A?

передавать дополнительные стили / классы в props этого компонента и кастомизировать таким образом вывод именно на этой странице

например так? function Aside({ className }) { return ( <aside className={`Aside ${className}`}> ... </aside> ) }

оберни компонент а див и дай позишан

да, но как по мне это оверхэд ведь где-то мне понадобится каждый компонент как-то спозиционировать, то мне что все оборачивать в дивы?

пропсы давай тогда

оба варианта рабочие, какой использовать - уже вопрос организации кода. в одном случае компонент встраивается как есть и ему задаются дополнительные параметры (для условного контейнера), в другом случае для компонента глобально ничего не меняется, но меняется layout вокруг. на мой взгляд, схема при которой layout страницы описан на самой странице более правилен, но отдельные стили самого компонента бывает необходимо дополнить, и это делается через props

Абстракции частно идут ценой оверхэда, это нормально