更改 Fabric 中的分隔符颜色 UI

Question

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

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

我已经尝试了文档中所有可能的样式解决方案。我试过在 styles.root 属性上设置颜色、borderColor、outlineColor 等。我玩过 theme 属性的 semanticColors 部分，但到目前为止我一无所获。

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

有人知道我该怎么做吗？

Answer 1

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

The [attribute^=value] selector matches every element whose attribute value begins with a specified 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>

更改 Fabric 中的分隔符颜色 UI

Changing Seperator color in Fabric UI

reactjs

office-fabric