Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?
Во первых инлайнить стили - моветон, вам это должны были сказать. Хотите сделать разный дизайн кнопок - используйте
clsx и передавайте стили через className внутри компонента через пропс
<Button className="button-any">Какой-то текст</Button>
И внутри Button принимает className куда вы пропсом его передаете, внутренности кнопки у вас {children}
Как это сделать если нельзя ставить обработчик событий на компонент?
Кто сказал? По принципам SOLID, у вас компонент не должен знать о сложной логикике, поэтому вы внутри компонента создаете onClickHandler, в которой пропсом спускаете функцию из родительского, которая уже выполняет логику.
Что бы более понятно было как создавать компоненты - вот вполне неплохая статья -
https://habr.com/ru/company/yandex/blog/560194/
