Reactjs 如何再现材质UI卡样式

我正在研究MaterialUI，但在演示（示例）中找不到与他们网站中的内容类似的内容

---

我的问题是我想复制它，所以我尝试使用

组件复制容器（而不是内容），但复制得不好，所以我想知道是否有特定的组件可供使用。

如果我正确理解您的问题，您正在寻找一种方法来模拟可折叠的演示容器，该容器在Material UI的文档中显示演示背后的代码（您希望使用Material UI组件来实现这一点）

该特定容器在docs站点中作为一个组件实现，由依赖JSS进行样式化的材料UI组件组成。它也是开源的，所以看看它应该会对你有所帮助

以下是渲染方法的摘录：

  <div className={classes.root}>
    <IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
      <CodeIcon />
    </IconButton>
    <Collapse in={this.state.codeOpen}>
      <MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
    </Collapse>
    <div className={classes.demo} data-mui-demo={name}>
      <DemoComponent />
    </div>
  </div>

这是一个用于材料UI文档中演示的组件。它只不过是一个带有

IconButton

的样式化div

markdown元素

包含由容器右上角显示的代码按钮切换的代码。它被包装在一个

Collapse

组件中，该组件处理切换代码可见性时发生的动画转换

演示将在

DemoComponent

中进行

所有样式都使用JSS处理，JSS在样式表对象中定义

---

我相信您可以按照此模式将其构建到

卡中。它应该非常简单，比如在
CardHeader
中添加一个动作，触发状态更改，并切换您希望扩展的内容。
如果您提供代码，我可以告诉您如何对其进行排序。为什么复制得不好？非常感谢您的回复，这正是我想要的。我是用卡片+卡片头做的，但是它变成了一团混乱。