Override margin in Separator Component of Fluent UI using React

Question

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.

Here's a screenshot:

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.

Here's the code I have thus far:

  const separatorStyles = {
    root: [
      {
        margin: 0,
        padding: 0,
        selectors: {
          '::before': {
            background: 'black',
            top: '0px'
          }
        }
      }
    ]
  };

  export default class Home extends Component {
  render() {
    return (
      <Stack verticalAlign="center" verticalFill gap={15}>
        <Component1/>
        <Separator styles={separatorStyles} />
        <Component2 />
      </Stack>
    );
  }
}

I've tried placing the margin: 0 where it currently is at the root level and also nested below the ::before but neither have worked.

The only other potential clue I have comes from an inspection of the styles in Chrome's DevTools which yields:

Any ideas would truly be appreciated!

Thanks for your time!

score 3 · Accepted Answer · answered Jun 03 '20 at 20:38

The 15px actually came from the gap prop that was passed to the Stack component. It takes care of adding that css class to children elements to ensure the proper margins exist.

I believe removing it altogether should solve your concern, such as in this example (link to working code):

<Stack verticalAlign="center" verticalFill>
        <button>Button1</button>
        <Separator>no margin</Separator>
        <button>Button2</button>
        <Separator />
        <button>Button3</button>
      </Stack>

However, it is worth noting that the Separator expects to render some text, so you might have trouble getting it to be the exact height you want (as font-size is a concern for the Separator). If that's the case, you might be better off just making your own control to render a 1px line with a simple div or span.

Excellent. I should've realized that the 15 in the `Stack` component was related to the 15 I was seeing in the DevTools; that's embarrassing. I didn't realize that it actually affected the _child_ components so directly. This is good to know. Thanks for the detailed answer and codepen example...and welcome to Stack Overflow @JD Huntington! — risingTide, Jun 04 '20 at 21:14

score 1 · Answer 2 · answered Jan 20 '21 at 13:09

Also you can you use this approach with styled-component:

import React from 'react'
import {Separator} from '@fluentui/react'
import styled from 'styled-components'

const StyledSeparator = styled(Separator)`
    &::before {
        margin-top: 15px;
    }

    div {
        //any styles for separator-content
    }
`

export const Divider = ({children}) => {
    return <StyledSeparator>{children}</StyledSeparator>
}

Override margin in Separator Component of Fluent UI using React

2 Answers2