Может инлайнить стили?

позиционирование тоже из родителя можно передавать

комбинировать className + style, тогда компонент будет предельно чист

ну я не фанат style, больше нравится когда css лежит в .css

Т.е в мой компонент переиспользуемый не будут приходить через проп стили из родителя, а в самом родители будут style={{margin:}}

Да просто такое чувство что код засираю)

У меня компонент button есть, внутри уже полотно css кода

от каждого из родителей

Под каждый конкретный проп, под каждый цвет и тд

Всем привет. Может кто-то сталкивался. Есть приложение react + typescript. Установил пакет с npm, все работает. Понадобились типы для пакета, поставил с npm типы для этого пакета и теперь, в коде где использую компонент из этого пакета, выходит ошибка - "невозможно использовать как компонент JSX.Тип экземпляра не является допустимым элементом JSX". Кто знает, как лечить?

передавай className в компонент из родителя, который будет добавляться

return (
   <button
     className={cn(styles.button, {
       [styles[props.customClass]]: props.customClass,
     })}
     type={type}
     onClick={() => {
       isHaveHandler && onClickHandler(props.id);
     }}
   >
     {text || icon}
   </button>

Это правильная реализация?

Т.е если приходит проп, то я потом добавляю в Module.css компонента button нужные стили, которые передаются от родителя

не, у тебя css родителя будет использоваться

<Button customClass="anyClass" onClickHandler={routeInPage} icon={<PrevIcon />} />

А это пример как проп приходит в компонент

Parent.css
.button { padding-top: 10px }

Button.css
.button { color: red; }

Parent.js
return <Button className={styles.button} />

Button.js
return <button className={clsx(styles.button, props.className} />

В html будет типа
<div class="Parent__button--f3a6 Button__button--e453f">

Окей, спасибо большое

Привет! Недавно начала работать с реактом, и не совсем понимаю как правильно переиспользовать компоненты.
Допустим у меня есть компонент плюсик, по нажатию на который появляется текст. Я хочу его использовать в 2 местах (пусть в хэдере один, а второй в футере)
и вот я не понимаю, где размещать функционал компоненты?
Вот моя компонента Плюс
export default function Plus({ id, func, className }) {
 return (
   <span
     className={`${className}`}
     onClick={() => {
       func(id)
     }}
   />
 )
}


Я создала 2 компоненты в которых использую компоненту Плюс
И в них я помещаю функционал, который по факту одинаков, но дублирую его из за того что мне надо получить место в котором нужно открыть мой плюс.

export default function BurgerNavigation({ items }) {
 const AddMenu = (id) => {
   const addMenu = document.querySelectorAll('.addNav')
   const plusBtn = document.querySelectorAll('.plusBtn')
   for (let i = 0; i < addMenu.length; i++) {
     if (addMenu[i].classList.contains(styles.open) && addMenu[i] !== addMenu[id]) {
       addMenu[i].classList.remove(styles.open)
       plusBtn[i].classList.remove(styles.minusBtn)
     }
   }
   addMenu[id].classList.toggle(styles.open)
   plusBtn[id].classList.toggle(styles.minusBtn)
 }
 return (
   <div className="menu">
     ...
             <Plus id={element.key} func={AddMenu} className={`${styles.plusBtn} plusBtn`} />
     ...
   </div>
 )
}
Вторая компонента
export default function Locations({ items }) {
 const AddLocation = (id) => {
   const location = document.querySelectorAll('.location')
   const plusBtn = document.querySelectorAll('.plusFooter')
   for (let i = 0; i < location.length; i++) {
     if (location[i].classList.contains(styles.open) && location[i] !== location[id]) {
       location[i].classList.remove(styles.open)
       plusBtn[i].classList.remove(styles.minusBtn)
     }
   }
   location[id].classList.toggle(styles.open)
   plusBtn[id].classList.toggle(styles.minusBtn)
 }
 return (
   <div>
     {items.map((el) => {
       return (
         <div>
           ...
             <Plus id={el.key} className={`${styles.plusBtn} plusFooter`} func={AddLocation} />
           ...
         </div>
       )
     })}
   </div>
 )
}

Посоветуйте, как это делается правильно? Когда есть компонента, функциона у нее такой же, только месторасположение действий разное, то есть нужны разные селекторы.