Смотрите, есть компонент кнопка: export const Button = props => (

Question

Смотрите, есть компонент кнопка: export const Button = props => (

<button className="button">
Кнопка
</button>
)
рендер: <button class="button">Кнопка</button>

если я захочу добавить класс к компоненту снаружи:
<Button className="new-class" /> то рендер останется таким же - <button class="button">Кнопка</button>

а если я сделаю так:
export const Button = props => (
<button className={`button ${this.props.className}`}>
Кнопка
</button>
)

то рендер уже будет таким: <button class="button new-class">Кнопка</button>

и это сработает.

так вот, это нормально? просто не удобно мне кажется оборачивать в обертки компоненты, если нужно какой-то класс добавить, или же в каждом комопненте пропсы с className склеивать