CODEWITHSUNDEEP
material-uistenciljs
Santiago
Santiago

Reputation: 401

Cannot use a material-ui component into Stencil project

I want to use material TextField inside of one of my Stencil components. As Stencil components are implemented on JSX, and Material-UI also, as it exports a JSX.Element, I've thought it will be very straighfull to implement, but when I do this simple example:

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

I get this error:

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

Please, any idea of where the problem is? Thanks in advance!

Upvotes: 2

Views: 1229

Answers (1)

Adoel
Adoel

Reputation: 1

Stencil is Web Component, Material UI is UI Framework. It's not the same concept actually

Upvotes: 0

Related Questions