使卡片（或纸张）不占用全角材质UI

Question

我正在尝试创建一个卡片元素，该元素不会跨越其所在容器的整个宽度。

Example似乎可以做到

但是当我尝试使用示例代码时，我的卡片会拉伸页面的整个宽度。

https://codesandbox.io/s/074zmkx0

Answer 1

您好，当我运行您的示例时，它也涵盖了整个页面，但这很容易解决。在 Style.css 中，您可以添加 css选择器，以将Card组件的显示更改为inline-block。

Style.css

    /* Card component */
    #root > div > div {
          display: inline-block;
    }

Answer 2

使用尺寸：

import { sizing } from '@material-ui/system';

card :{
    width:"50%"
}

有关更多信息：https://material-ui.com/system/sizing/