这可能来自哪个材料设计库？

Question

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

我已经浏览了Materialise 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>;
  }
}

或者即使您可以分享自己的身份。

感谢您在任何时候都可以为我提供帮助。

Answer 1

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