title: Override margin in Separator Component of Fluent UI using React
body: <p>I'm trying to override the margin attribute of a Separator component using Microsoft's Fluent UI using React.  The top-margin appears to default to 15px and I would like it to be less than that.  </p>
  
  <p>Here's a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/odZPt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/odZPt.png" alt="Problem pic"></a></p>
  
  <p>The beige color section above is defaulting to 15px and I'd like to shrink it but I can't seem to find the correct css to do so.</p>
  
  <p>Here's the code I have thus far:</p>
  
  <pre><code>  const separatorStyles = {
      root: [
        {
          margin: 0,
          padding: 0,
          selectors: {
            '::before': {
              background: 'black',
              top: '0px'
            }
          }
        }
      ]
    };
  
    export default class Home extends Component {
    render() {
      return (
        &lt;Stack verticalAlign="center" verticalFill gap={15}&gt;
          &lt;Component1/&gt;
          &lt;Separator styles={separatorStyles} /&gt;
          &lt;Component2 /&gt;
        &lt;/Stack&gt;
      );
    }
  }
  </code></pre>
  
  <p>I've tried placing the <code>margin: 0</code> where it currently is at the root level and also nested below the <code>::before</code> but neither have worked.</p>
  
  <p>The only other potential clue I have comes from an inspection of the styles in Chrome's DevTools which yields:</p>
  
  <p><a href="https://i.stack.imgur.com/B4BAV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B4BAV.png" alt="enter image description here"></a></p>
  
  <p>Any ideas would truly be appreciated!</p>
  
  <p>Thanks for your time!</p>