如何去除@fluentui/react-northstar中Grid与Segment组件的多余边框

问题表现 #

使用以下代码引入并调用组件时：

import { Grid, Segment } from "@fluentui/react-northstar";

<Grid columns="repeat(4, 1fr)" rows="50px 150px">
  <Segment
    color="brand"
    content="Header"
    inverted
    styles={{
      gridColumn: 'span 4',
    }}
  />
  <Segment
    color="green"
    content="Menu"
    inverted
    styles={{
      gridColumn: 'span 1',
    }}
  />
  <Segment
    content="Content"
    styles={{
      gridColumn: 'span 3',
    }}
  />
</Grid>

渲染后每个Segment外围、Grid组件外围都会出现水平分割线，直接给组件设置border: 'none'样式无法去除该线条。

失效原因 #

Segment组件的默认分割线效果没有使用CSSborder属性实现，而是通过box-shadow属性模拟的1px水平线条；视觉上Grid外围的线条是内部Segment的阴影溢出导致，Grid本身默认没有自带边框，所以单独设置border: none完全不生效。

修复方案 #

在每个Segment的styles配置中同时重置border和box-shadow两个属性，即可完全移除所有默认线条：

<Grid columns="repeat(4, 1fr)" rows="50px 150px">
  <Segment
    color="brand"
    content="Header"
    inverted
    styles={{
      gridColumn: 'span 4',
      border: 'none',
      boxShadow: 'none'
    }}
  />
  <Segment
    color="green"
    content="Menu"
    inverted
    styles={{
      gridColumn: 'span 1',
      border: 'none',
      boxShadow: 'none'
    }}
  />
  <Segment
    content="Content"
    styles={{
      gridColumn: 'span 3',
      border: 'none',
      boxShadow: 'none'
    }}
  />
</Grid>

如果项目中大量使用无边框的Segment，可以直接在FluentUI自定义主题中重写Segment组件的默认样式变量，全局生效，不需要逐个组件添加样式覆盖。

内容的提问来源于stack exchange，提问作者Harsh Shrivastava