如何在电子中使用 Material Web 组件答案

【问题标题】：How to use Material Web Components in electron如何在电子中使用 Material Web 组件
【发布时间】：2021-08-25 00:56:45
【问题描述】：

我正在尝试在电子应用程序中使用谷歌设计师的东西。

但即使安装我也无法使用设计师材料的风格

我使用安装包

npm i material-components-web

我的代码如下：

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <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>
    <title>MyTestApp</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <div class="win">
      <div>
        <img src="bacground.png"/>
      </div>
      <div class="Panel">
          <div class="Test"></div>
            <mwc-textfield class="TextFiledTest" label="Test" icon="event"></mwc-textfield>
          </div>
      </div>
    </div>
  </body>
</html>

任何在电子中使用过材料网络组件的人可以告诉我如何让它工作吗？

【问题讨论】：

标签： javascript html css electron material-design

【解决方案1】：

默认内容安全策略阻止加载第三方资源。此外，由于您已经为材料 Web 组件安装了 npm 模块，您可以在本地加载它们。

要解决这个问题：

更新您的内容安全策略标头以启用加载材料图标字体。

    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self';
      script-src 'self';
      font-src 'self' https://fonts.gstatic.com;
      style-src 'self' https://fonts.googleapis.com"
    />

使用已安装节点模块中的脚本和样式：

    <link
      rel="stylesheet"
      href="node_modules/material-components-web/dist/material-components-web.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <script src="node_modules/material-components-web/dist/material-components-web.min.js"></script>

另外添加一个本地 CSS 文件来修复用户代理样式：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
 }
 * { box-sizing: border-box }

【讨论】：