无法在 Stencil 项目中使用 material-ui 组件答案

【问题标题】：Cannot use a material-ui component into Stencil project无法在 Stencil 项目中使用 material-ui 组件
【发布时间】：2020-09-23 16:46:17
【问题描述】：

我想在我的 Stencil 组件之一中使用材质 TextField。由于 Stencil 组件是在 JSX 上实现的，Material-UI 也是，因为它导出一个 JSX.Element，我认为实现起来会非常简单，但是当我做这个简单的例子时：

import { Component, Host, h, Element, ComponentInterface } from '@stencil/core';
import TextField from '@material-ui/core/TextField';

Component({
 tag: 'example-input',
  shadow: false
})

export class Input implements ComponentInterface {

  @Element() el!: HTMLElement;

  render() {

    return (
      <Host >
        <TextField required id="standard-required" label="Required" defaultValue="Hello World" />
      </Host>
    );
  }
}

我收到此错误：

DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('[object Object]') is not a valid name.

请问您知道问题出在哪里吗？提前致谢！

【问题讨论】：

标签： material-ui stenciljs

【解决方案1】：

Stencil 是 Web 组件，Material UI 是 UI 框架。其实不是同一个概念

【讨论】：