Can't get material-components-web to work with Stencil

Question

I have a Stencil component where I use material-components-web to customize material components:

import { Component, Prop, h } from "@stencil/core";

@Component({
  tag: "my-textfield",
  styleUrl: "my-textfield.scss",
  shadow: false,
})
export class MyTextfield {
  render() {
    return (
      <label className="mdc-text-field mdc-text-field--filled">
        <span className="mdc-text-field__ripple"></span>
        <input
          type="text"
          className="mdc-text-field__input"
          aria-labelledby="my-label"
        ></input>
        <span className="mdc-floating-label" id="my-label">
          Label
        </span>
        <span className="mdc-line-ripple"></span>
      </label>
    );
  }
}

My stylesheet looks like this:

@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

.mdc-text-field {
  font-size: 24px;
}

My custom font size is correctly applied, however material styles are not. What's the issue here? I have Stencil's sass() plugin installed.

Answer 1

When using html or jsx, use class not className. className is for use in js/ts as a property of an element object e.g. myElement.className = 'my-class';.

import { Component, Prop, h } from "@stencil/core";

@Component({
  tag: "my-textfield",
  styleUrl: "my-textfield.scss",
  shadow: false,
})
export class MyTextfield {
  render() {
    return (
      <label class="mdc-text-field mdc-text-field--filled">
        <span class="mdc-text-field__ripple"></span>
        <input
          type="text"
          class="mdc-text-field__input"
          aria-labelledby="my-label"
        ></input>
        <span class="mdc-floating-label" id="my-label">
          Label
        </span>
        <span class="mdc-line-ripple"></span>
      </label>
    );
  }
}