如何使用CSS替换react-bootstrap中的面包屑分隔符？

Question

所以我有一个与react-bootstrap 一起使用的面包屑组件。我需要用“>”覆盖默认分隔符。但它并没有覆盖任何东西。有人可以帮忙解决这个问题吗？

面包屑：

<Breadcrumb>
   <Breadcrumb.Item onClick={goTo('/')}>Home</Breadcrumb.Item>
   <Breadcrumb.Item onClick={goTo(`/store`)}>
      {store?.name || 'unknown'}s
   </Breadcrumb.Item>
   <Breadcrumb.Item active>{title}</Breadcrumb.Item>
</Breadcrumb>

CSS：

.breadcrumb-item+.breadcrumb-item::before { content: ">" !important; }

Answer 1

.breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,">") !重要;}