Есть ли способ добавить таблицу стилей для получения темы «Материал» или аналогичной для всех элементов формы на странице?

Question

Есть ли способ добавить в таблицу стилей, которая обновляет элементы формы в теме материала?

Я использую обычную HTML-страницу и хочу, чтобы тема заполнила ширину и высоту элементов формы, которые есть на странице.

Я могу назначить имена классов элементам для их оформления или если таблица стилей будет применяться к существующим элементам, которые также будут работать.

Answer 1

Вы можете назначить классы Material Design после включения файлов ресурсов в верхний и нижний колонтитулы проекта.

CDN:

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

NPM:

npm install @material/form-field

---

Пример кнопки: Чтобы стилизовать кнопку (отправить, например),Вы добавляете класс следующим образом, где foo-button будет вашим пользовательским CSS для перезаписи:

<button class="mdc-button foo-button">Button</button>

Пример формы : Чтобы оформить форму, вы можете следовать Полям формы инструкция.

<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
    <div class="mdc-checkbox__background">
      ...
    </div>
  </div>
  <label for="my-checkbox">This is my checkbox</label>
</div>

Часть JS, предназначенная для обработки ошибок и проверки, немного сложна, но если вы используете консоль для управления обработчиками и т. Д., Вы должны иметь возможность управлять.