html - 有没有办法放入样式表以获得页面上所有表单元素的 Material 主题或类似主题？

Question

有没有办法放入一个样式表，将表单元素更新为 Material 主题？

我正在使用纯 HTML 页面，并希望主题填充页面上表单元素的宽度和高度。

我可以将类名分配给元素以设置它们的样式，或者如果样式表适用于现有元素，也可以正常工作。

Answer 1

在元素页眉和页脚中包含 Assets 文件后，您可以分配 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>

新公共(public)管理:

npm install @material/form-field

---

按钮示例: 要为按钮设置样式(例如提交)，您可以按如下方式添加类，其中 foo-button 将是您要覆盖的自定义 CSS:

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

表单示例: 要设置表单样式，您可以按照 Form Fields说明。

<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 部分有点棘手，但如果您使用控制台来管理处理程序等，您应该能够管理。