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

【问题标题】：How do I replace separator of breadcrumb in react-bootstrap using css?如何使用css替换react-bootstrap中的面包屑分隔符？
【发布时间】：2021-09-14 09:37:24
【问题描述】：

所以我有一个与 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; }

【问题讨论】：

标签： reactjs react-bootstrap breadcrumbs

【解决方案1】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。