1

我正在尝试使用 Microsoft 的 Fluent UI 使用 React 覆盖 Separator 组件的边距属性。上边距似乎默认为 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 中样式的检查，结果如下：

在此处输入图像描述

任何想法都将不胜感激！

谢谢你的时间！

4

2 回答 2

3

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

我相信完全删除它应该可以解决您的问题，例如在此示例中（链接到工作代码）：

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

然而，值得注意的是Separator期望渲染一些文本，所以你可能很难让它达到你想要的确切高度（因为字体大小是分隔符的一个问题）。如果是这种情况，您最好只制作自己的控件以使用简单的divor呈现 1px 线span。

于 2020-06-03T20:38:39.483 回答
1

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

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>
}
于 2021-01-20T13:09:26.077 回答