Изменение цвета Seperator в интерфейсе Fabric - PullRequest
Новая
       20

Изменение цвета Seperator в интерфейсе Fabric

0 голосов
/ 10 мая 2019

В документации по элементу управления Разделитель для пользовательского интерфейса Microsoft Fabric разделитель представляет собой простой элемент управления, который разделяет содержимое и разрешает содержимое внутри Разделителя, в то же время позволяя использовать некоторые параметры настройки.

Там нет 'Кажется, это способ изменить цвет фактической разделительной линии.Мне нужно сделать это, так как цвет фона моего приложения почти такой же, как цвет разделительной линии.

Я попробовал все возможные способы стилевого оформления в документации.Я попытался установить цвет, borderColor, outlineColor и т. Д. В свойстве styles.root.Я играл с частью semanticColors свойства theme, и до сих пор ничего не придумал.

Внутренне кажется, что линия создается как :before дотекст и background-color это то, что определяет цвет.Но я не могу найти способ изменить это.

Кто-нибудь знает, как я могу это сделать?

1 Ответ

1 голос
/ 10 мая 2019

Вам нужно переписать CSS.Цвет фона разделителя устанавливается в .root-*::before, который изменяется, поэтому вы не можете использовать .root-45::before, поскольку это может измениться на .root-56::before в другом браузере.используйте селектор [атрибут ^ = значение]

селектор [атрибут ^ = значение] соответствует каждому элементу, значение атрибута которого начинается с указанного значения.

ОБНОВЛЕНИЕ

Вы также можете создать объект стилей и передать его компоненту. 

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