Material-ui , 去除纸张边框

【问题标题】：Material-ui , remove paper borderMaterial-ui , 去除纸张边框
【发布时间】：2021-12-31 14:45:08
【问题描述】：

Material-ui Paper 组件中如何去除顶部边框。我尝试了以下方法，但似乎不起作用。

     <Paper
        sx={{
          border: 0,
          borderTop: 0,
          borderRadius: 0,
        }}
      >
        <Box className="main">
          <Typography variant="h4">O_x</Typography>
          <InvoiceFormCmp />
        </Box>
      </Paper>

image

【问题讨论】：

标签： css material-ui

【解决方案1】：

您可能没有注意到 Paper 组件没有使用任何边框。由于 Paper 组件使用了 box-shadow CSS 属性，您会看到该行。您可以将其设置为无：

<Paper sx={{ boxShadow: "none" }}>
  <Box className="main">
    <Typography variant="h4">0_x</Typography>
  </Box>
</Paper>

Check the sandbox here

【讨论】：