如何使用CSS修改react-bootstrap中Breadcrumb面包屑的默认分隔符

最优方案：直接使用组件自带divider属性 #

react-bootstrap的Breadcrumb组件本身内置了修改分隔符的divider属性，不需要额外写CSS覆盖，直接传入你需要的分隔符即可：

<Breadcrumb divider=">">
   <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修改的话，以下是CSS不生效的常见原因和修复方案： #

CSS样式不生效原因1：选择器权重不足 #

react-bootstrap内置的默认样式优先级更高，你的选择器权重不够，就算加!important也可能被加载顺序更靠后的默认样式覆盖。
修复方法：给Breadcrumb组件添加自定义类名，提高选择器权重：

1. 修改组件代码，添加自定义类名：

<Breadcrumb className="custom-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>

2. 修改CSS样式：

.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: ">" !important;
  /* 可根据需求调整间距和颜色 */
  margin: 0 6px;
  color: #999;
}

CSS样式不生效原因2：样式作用域限制 #

如果你的项目使用了CSS Modules、React的CSS-in-JS方案，或者Vue的scoped样式，自定义样式会被限制作用域，无法作用到react-bootstrap的组件内部DOM上。
修复方法：添加全局样式标识，以Less/Sass为例：

:global(.custom-breadcrumb) .breadcrumb-item+.breadcrumb-item::before {
  content: ">" !important;
}

如果是CSS Modules，确保你引入的类名是从模块文件中导出的对象中获取后绑定到组件className上的。

内容的提问来源于stack exchange，提问作者Valery Fun