使卡片（或纸）不占用全宽材料 UI

Question

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

该示例似乎能够做得很好

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

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

Answer 1

嗨，当我运行您的示例时，它也跨越了整个页面，但这是一个简单的解决方法。在Style.css 中，您可以添加一个css 选择器来将 Card 组件的显示更改为inline-block.

样式文件

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