Быстрый ответ на два цента на это:
Я тоже потратил слишком много времени на размышления об этом (например, см. Стили как компоненты). Я пришел к выводу, что большая часть неуклюжести этой ситуации на самом деле заключалась в размещении стилей в отдельном файле. Если все необщие стилизованные компоненты просто объявлены встроенными ниже основного рассматриваемого компонента React, это делает связывание более быстрым и снижает нагрузку на именование - именование больше не должно сообщать вам, откуда оно взялось.
Что касается тех стилизованных компонентов, которые являются общими - я думаю, они просто заслуживают того, чтобы их рассматривали как обычные компоненты.
Я рад, что ваш подход работает для вас, но я думаю, что для меня наличие `S` менее элегантно, чем непосредственное сохранение этих стилизованных компонентов, относящихся исключительно к рассматриваемому компоненту, в том же файле. При этом соглашение о том, что компонент всегда имеет внешний элемент, называемый Wrapper, кажется естественным, поскольку нет никаких сомнений в том, что эта оболочка специфична для этого компонента.
P.S. На мой взгляд, это усиливает идеал React о единственном файле-единственном компоненте, потому что те стилизованные компоненты, которые существуют только в основном файле компонента по определению, существуют только для этого компонента, поэтому они являются частью определения этого компонента. Это имеет больше смысла только в мире хуков - где поведение иногда отделяется от основного объявления функции без сохранения состояния в том же файле.
