Search code examples
reactjsfluentui-react

Use Grid from @fluentui/react-northstar without borders

How to use Grid and Segment in @fluentui/react-northstar without borders or horizontal lines?

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

Usage:

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

The horizontal lines appear around each segments and around the Grid. The inline style using border:'none' or anything relater is also not working.

Solution

  • It's the default box-shadow CSS value currently set to

    box-shadow: rgb(34 36 38 / 15%) 0px 1px 1px 1px;

    Add this to your style class.

    boxShadow: 'none'