在 Fabric UI 中更改分隔符颜色答案

【问题标题】：Changing Seperator color in Fabric UI在 Fabric UI 中更改分隔符颜色
【发布时间】：2019-09-27 21:23:03
【问题描述】：

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

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

我已经尝试了文档中所有可能的样式解决方案。我尝试在styles.root 属性上设置颜色、边框颜色、轮廓颜色等。我已经使用了theme 属性的semanticColors 部分，但到目前为止我什么也没想到。

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

有人知道我该怎么做吗？

【问题讨论】：

我在下面更新了我的答案。

标签： reactjs office-fabric

【解决方案1】：

您需要覆盖 css。分隔符的背景颜色在.root-*::before 中设置，它会发生变化，因此您不能使用.root-45::before，因为这可能会在不同的浏览器中更改为.root-56::before。使用[attribute^=value] Selector

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

更新

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="//unpkg.com/office-ui-fabric-react/dist/office-ui-fabric-react.js"></script>
<div id="root"></div>

<script type="text/babel">

const { Separator, PrimaryButton } = window.Fabric;

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

class App extends React.Component {

    state = {
    name: 'Hello React'
  };

  render() {
    return (
      <div>
      <h1>{this.state.name}</h1>
      <PrimaryButton>I am a button Hello</PrimaryButton>
      <Separator styles={styles}>Today</Separator>
      <Separator>Now</Separator>
      </div>
    );
  }
}



ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

【讨论】：

SCSS 有办法解决这个问题吗？