1

Microsoft の Fabric UIのSeparatorコントロールのドキュメントでは、Separator はコンテンツを分離し、Separator 内のコンテンツを許可する一方で、いくつかのカスタマイズ オプションを許可する単純なコントロールです。

実際の区切り線の色を変更する方法はないようです。アプリの背景色が区切り線の色とほぼ同じであるため、これを行う必要があります。

ドキュメントで考えられるすべてのスタイリング ソリューションを試しました。プロパティで色、borderColor、outlineColorなどを設定してみましたstyles.root。プロパティのsemanticColors一部をthemeいじってみましたが、これまでのところ何も思いつきませんでした。

内部的には、行は:beforeテキストの前に作成され、それbackground-colorが色を決定するようです。しかし、これを変更する方法が見つかりません。

どうすればこれができるか知っている人はいますか？

4

1 に答える 1

3

css を上書きする必要があります。セパレーターの背景色は変化する設定になっているので、違うブラウザだと変わる可能性が.root-*::beforeあるので使えません。[attribute^=value] セレクターを使用.root-45::before.root-56::before

[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 に答える