Как добавить белую рамку в середину моей веб-страницы, используя Angular Material?

Question

Я пытаюсь сделать онлайн-страницу для рисования, например, рисовать, рисовать чернилами или рисовать.

Это англоязычный проект для университета и мой первый настоящий опыт веб-разработки.Они призвали нас использовать угловой материал.Они хотят что-то похожее на ЭТО , за исключением того, что левый верхний угол области рисования должен быть привязан к левому верхнему углу серой зоны.

Извините за французское КСТАТИКанада.

ЗДЕСЬ - это репозиторий, чтобы посмотреть код (я бы не вставлял каждый файл, и я не уверен, какие из них актуальны: \)

ЗДЕСЬ - это скриншот того, что у меня есть до сих пор.В общем, я хочу, чтобы это выглядело как ЭТО

Кажется, это очень просто сделать, но я все еще очень занят в веб-разработке.В этой конкретной зоне рисования пользователь будет делать рисунки благодаря SVG-элементам (я не особо разбирался в них, но я думаю, этот блок должен содержать SVG-элементы).

Большое спасибозаранее и, пожалуйста, LMK, если в моем сообщении что-то отсутствует / не так

Answer 1

Вам не нужно использовать дизайн материала для всего.Это просто инструмент, и его использование не должно быть принудительным, если оно вам не помогает.Конечно, введение второго каркаса, как правило, плохо, но добавление простого белого div не повредит.

В этом случае карточку дизайна материала https://material.angular.io/components/card/overview можно использовать в качестве бумажного контейнера (если выочень хочу использовать дизайн материалов).В этот бумажный контейнер вы можете поместить любой элемент, который поможет вам в достижении вашей цели.

Лучшее решение, вероятно, состоит в том, чтобы просто использовать белый div и светло-серые границы или тень.Похоже, это материальный дизайн и не будет беспокоить вас в будущем.