问题

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

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>
<summary>英文:</summary>

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.

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

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