使用 React 覆盖 Fluent UI 的分隔符组件中的边距

Question

我正在尝试使用 Microsoft 的 Fluent UI 使用 React 覆盖分隔符组件的边距属性。上边距似乎默认为 15px，我希望它小于这个值。

截图如下：

上面的米色部分默认为 15px，我想缩小它，但我似乎找不到正确的方法 css。

这是我目前的代码：

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

我试过将 margin: 0 放在它当前位于根级别的位置，并且还嵌套在 ::before 下面，但都没有用。

我唯一的其他潜在线索来自对 Chrome 的 DevTools 中样式的检查，它产生：

如有任何想法，我们将不胜感激！

感谢您的宝贵时间！

Answer 1

15px 实际上来自传递给 Stack 组件的 gap 道具。它负责将 css class 添加到子元素以确保存在适当的边距。

我相信完全删除它应该可以解决您的问题，例如在这个例子中 (link to working code):

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

但是，值得注意的是 Separator 需要呈现一些文本，因此您可能无法将其设置为您想要的确切高度（因为字体大小是分隔符的一个问题） .如果是这种情况，您最好只制作自己的控件来使用简单的 div 或 span.

渲染 1px 线

Answer 2

您也可以将这种方法与样式组件一起使用：

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

使用 React 覆盖 Fluent UI 的分隔符组件中的边距

Override margin in Separator Component of Fluent UI using React

css

reactjs

office-ui-fabric

office-ui-fabric-react

fluent-ui