这可能来自什么材料设计库？答案

【问题标题】：What Material Design library could this be coming from?这可能来自什么材料设计库？
【发布时间】：2019-08-21 21:50:59
【问题描述】：

我正在尝试为这种基于 Material Design 的 Web 应用程序模拟 css 样式：

我浏览了 Materialize CSS 和 MUI，我认为这两者都不是，但我对可以创建此类设计的 Material Design 库的数量感到不知所措，如果确实是用一个 CSS 框架。

有没有比我更有经验的人知道 Material Design CSS 框架在上面看到的这个优雅的设计中使用了什么？如果有的话，或者这可以通过直接的 css 轻松完成吗？

图标很简单，它是一个 Material Design 图标，我已经集成了它，但是这个看起来像网格的卡片样式列表似乎在某种类型的 iframe 视图中。因此，您可以在屏幕内的 iframe 类型的设计中滚动浏览这些卡片，当您将鼠标悬停在卡片上时，您可以看到它会突出显示为这种青色。

我尝试了 MUI 面板，它只完成了这个：

我的代码如下所示：

class LocationList extends React.Component {
  componentDidMount() {
    this.props.fetchLocations();
  }

  renderLocation() {
    return this.props.locations.map(location => {
      return (
        <div className="mui-panel" key={location.id}>
          <div className="">
            <div className="">
              <h1>
                {location.name}
                {location.airport_code}
              </h1>
              <MaterialIcon icon="airplanemode_active" />
              <p>{location.description}</p>
            </div>
          </div>
        </div>
      );
    });
  }

  render() {
    return <div className="">{this.renderLocation()}</div>;
  }
}

或者即使你可以分享你自己如何识别它。

感谢您抽出时间来帮助我。

【问题讨论】：

您是否在任何服务器上部署了代码？如果是，请分享链接。谢谢

标签： html css reactjs material-design

【解决方案1】：

您可以使用现有的东西并使用网格系统将面板并排放置，就像他们所做的那样。除此之外，我注意到的唯一区别是字体、位置、左边框宽度和颜色以及悬停颜色。我敢肯定，这些都可以用 CSS 来完成。如果这些面板来自一个框架，我以前没有见过。我认为您可以自己完成大部分工作，只需很少的麻烦。您可以查看页面源以可能识别框架（如果有）。如果有任何独特的类名等，您可以搜索这些名称，看看是否有使用这些名称的框架。

【讨论】：