How to use Material Web Components in electron

user_16080025 0
Viewed 461

I'm trying to use the google designer stuff in my application made on electron.

but even installing I can't use the style of the designer material

I installed the package using

npm i material-components-web

My code is as follows:

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>

Can anyone who has used material web components in electron tell me how can I do it to work?

electron material-design css html javascript
1 Answers

The default content security policy block loading of third party resources. Also, since you already installed npm module for material web components you can load them locally.

To fix this issue:

  1. Update your content security policy header to enable loading the material icon font.
    <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"
    />
  1. Use the scripts and styles from installed node modules:
    <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>
  1. Also add a local CSS file to fix user agent styles with:
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
 }
 * { box-sizing: border-box }
user_5875400
Related