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>
    );
  }
}

@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;
}

<details>
<summary>英文:</summary>
I have a Stencil component where I use material-components-web to customize material components:

My stylesheet looks like this:

My custom font size is correctly applied, however material styles are not. What's the issue here? I have Stencil's sass() plugin installed.
</details>
# 答案1
**得分**: 1
当在使用HTML或JSX时，请使用`class`而不是`className`。`className`用于在JavaScript/TypeScript中作为元素对象的属性使用，例如`myElement.className = 'my-class';`。
```jsx
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>
    );
  }
}