1

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

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

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

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

有谁知道我该怎么做？

4

1 回答 1

3

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

[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>

于 2019-05-10T06:47:35.060 回答