Из какой библиотеки дизайна материалов это может происходить?

Question

Я пытаюсь эмулировать стиль CSS для этого типа веб-приложения на основе Material Design:

Я просмотрел 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, я уверен.Если есть рамки, из которых появились эти панели, я не видел ее раньше.Я думаю, что вы можете сделать большую часть этого самостоятельно с довольно небольшим количеством проблем.Вы можете посмотреть на исходный код страницы, чтобы определить структуру, если она есть.Если есть какое-либо уникально выглядящее имя класса и т. Д., Вы можете выполнить их поиск и посмотреть, есть ли среда, которая использует эти имена.