无法在Stencil项目中使用Material-UI组件

问题描述

我想在我的一个模板组件中使用材质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.

请问,您对问题出在哪里有任何想法? 预先感谢!

解决方法

Stencil 是 Web Component,Material UI 是 UI 框架。其实不是同一个概念