Override margin in Separator Component of Fluent UI using React - css

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!

Answer 1

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.

Answer 2

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