有没有办法制作无边框的材料UI卡片

xmakbtuz  于 2022-09-21  发布在  React
关注(0)|答案(2)|浏览(135)

我已经阅读了文档将其设置为variant="outlined"或设置为raised的选项

但有没有办法让卡片看不见边框呢?

brccelvz

brccelvz1#

您可以为卡片设置内联样式,并将边框和框阴影属性设置为None。

<Card style={{ border: "none", boxShadow: "none" }}>
    ....
</Card>

另一种方法是使用@material-ui/core/styles中的makeStyles,并设计一个可以赋予卡片的类的样式。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";

const useStyles = makeStyles({
  custom: {
    border: "none",
    boxShadow: "none"
  }
});

const classes = useStyles();
.
.
.
return (
  <Card className={classes.custom}>
    ....
  </Card>
);
goucqfw6

goucqfw62#

您也可以这样做,以删除卡上的边框半径。您只需将square={true}添加到Card组件即可。

<Card square={true}>
    Your content
</Card>

如果需要,您还可以阅读文档。Material Ui Paper Api

相关问题