Material.io - some of Material design library's components aren't being rendered properly

1
votes

I've imported Material Design library's css and js files but for some reason text field isn't working properly even though the button component below it is displayed correctly.

It looks like JS isn't getting applied at all

Codepen: https://codepen.io/x84733/pen/yEEbjK

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<style>@import url("https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css");</style>

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

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

text-field component code was taken from docs: https://material.io/develop/web/components/input-controls/text-field/

1
javascriptcssmaterial-design

1 Answers

2
votes

Refer to here for how to import styles and here to learn how to instantiate JavaScript automatically for different components for material.io. For textfield, you have to import following code in your css:

@import "@material/textfield/mdc-text-field";

And following code to your js:

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

Here's the overall demonstration:

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
@import "@material/textfield/mdc-text-field";
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"/>

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

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

And codepen link: https://codepen.io/anon/pen/pKKPBK