Добавить стиль / интервал в React Breadcrumb

Вы можете решить эту проблему несколькими способами, в произвольном порядке:

• Добавьте интервал при рендеринге каждой хлебной крошки

const Breadcrumbs = withBreadcrumbs()(({ breadcrumbs }) => (
  <React.Fragment>
    {breadcrumbs.map(({ breadcrumb }) => <span>{breadcrumb} &gt;</span>)}
  </React.Fragment>
));

Ключевым моментом здесь является отрисовка символа > и обернутого тега span.

• Используйте псевдоселекторы CSS, чтобы добавить пробел и разделитель к каждому элементу навигации.

const Breadcrumbs = withBreadcrumbs()(({ breadcrumbs }) => (
  <React.Fragment>
    {breadcrumbs.map(({ breadcrumb }) => <span className="crumb">{breadcrumb}</span>)}
  </React.Fragment>
));

.crumb::after {
  padding-left: 0.625rem;
  content: '>';
}