更改 Fabric UI 中的分隔符颜色

Question

在Microsoft Fabric UI 的Separator控件文档中，Separator 是一个简单的控件，用于分隔内容并允许内容位于 Separator 内，同时允许一些自定义选项。

似乎没有办法改变实际分隔线的颜色。我需要这样做，因为我的应用程序的背景颜色几乎与分隔线的颜色完全相同。

我已经尝试了文档中所有可能的样式解决方案。我尝试过在属性上设置颜色、borderColor、outlineColor 等styles.root。我已经研究过这semanticColors部分财产theme，但到目前为止我什么也没想出来。

在内部，该行似乎是在:before文本之前创建的，并且background-color决定了颜色。但我找不到办法改变这一点。

有人知道我该怎么做吗？

Answer 1

您需要覆盖 css。分隔符的背景颜色设置会发生.root-*::before变化，因此您无法使用，因为这可能会在不同的浏览器中.root-45::before发生变化。.root-56::before使用[属性^=值]选择器

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

更新

您还可以创建样式对象并将其传递给组件。

const styles = {
  root: [{
    selectors: { // add selectors here
      '::before': {
        background: 'blue',
      },
    }
  }]
};

<Separator styles={styles}>Today</Separator>

const styles = {
  root: [{
    selectors: { // add selectors here
      '::before': {
        background: 'blue',
      },
    }
  }]
};

<Separator styles={styles}>Today</Separator>