CODEWITHSUNDEEP
reactjsoffice-fabric
Arlo
Arlo

Reputation: 980

Changing Seperator color in Fabric UI

In the Separator control documentation for Microsoft's Fabric UI, the Separator is a simple control that separates content and allows content inside the Separator, while allowing some customization options.

There doesn't seem to be a way to change the color of the actual separator line. I need to do this as the background color of my app is almost exactly the same as the color of the separator line.

I have tried every possible styling solution in the documentation. I've tried setting color, borderColor, outlineColor, etc, on the styles.root property. I've played with the semanticColors portion of the theme property, and so far I've come up with nothing.

Internally, it seems that the line is created as a :before before the text and the background-color is what determines the color. I can't find a way to alter this, though.

Anyone know how I can do this?

Upvotes: 1

Views: 2472

Answers (1)

Junius L
Junius L

Reputation: 16132

You need to overwrite the css. The background color of the separator is set in .root-*::before which changes, so you can't use .root-45::before as this might change to .root-56::before in a different browser. use [attribute^=value] Selector

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

UPDATE

You can also create a styles object and pass it to the component.

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>

Upvotes: 5

Related Questions