Как позиционировать элементы в react и сохранить реюзабельнисть компонентов???

Question

[m_frost]

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

Comments

[Антон Спирин]

Вопрос больше по основам верстки. Возможно, вам стоит посвятить время ее изучению.
Хорошие примеры "реюзабельных" компонентов можно посмотреть в любом UI Kit, например, в том же bootstrap.

[m_frost]

Антон Спирин, та причем здесь верстка когда у меня например есть 1 компонент в 3х местах и в каждом месте у него разные margin padding как мне это сделать.

[Антон Спирин]

m_frost, нет никакой разницы есть у вас html:
<button class="btn" />
или react компонент:
<Button />
Задачи расширения и переопределения стилей решаются точно так же как и в html(если не используете css-in-js библиотек), например, с помощью дополнительных классов:
<button class="btn some-component__btn" />
или в react интерпритации:
<Button className="some-component__btn" />

const Button = ({ className, children }) => (
  <button className={`btn${className ? ` ${className}` : ''}`}>{children}</button>
);

Инструментов для стилизации в React очень много, но суть везде примерно одна - расширение или переопределение базовых классов, стилей или передача специализированных свойств.

Answer 1

[McBernar]

Обернуть компонент в див.
Пробросить в компонент класс.
Вынести инлайн-стили в пропсы компонента.

Что вам больше нравится.

Comments

[m_frost]

Обернуть компонент в див.

ну а куда мне потом писать стили к этому div , я не понимаю где мне в файловые структуре держать стиле для div обертки???

[McBernar]

В том компоненте, куда вы подключаете сторонний компонент.

Есть, например, компонент about, который является страницей. У него есть свои стили. В этих стилях вы и задаете класс для компонента button, который импортируете в about. У button, соответственно, не должно быть своего позиционирования и отступов. Только внутренние паддинги и дизайн.

[m_frost]

McBernar, спасибо сейчас буду пробовать