CODEWITHSUNDEEP
material-uistorybookstenciljs
Tasos Tsipos
Tasos Tsipos

Reputation: 1

MDUI Button Not Rendering Properly in Stencil Web Component

I'm working on a project where I'm trying to integrate MDUI components (like buttons) into my Stencil web components project. I've followed the MDUI documentation and introduced MDUI CSS and components into my project, but the MDUI button is not rendering properly.

Here's what I've done so far:

import { Component, Host, Prop, h } from '@stencil/core';
// Always import the CSS file
import 'mdui/mdui.css';
import 'mdui/components/button';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {

  @Prop()
  variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';

  @Prop()
  disabled = false;

  componentDidLoad() {
    (window as any).mdui?.init();
  }

  render() {
    return (
      <Host>
        <mdui-button variant={this.variant} disabled={this.disabled}>
          <slot></slot>
        </mdui-button>

        <button
          class={`mdui-btn mdui-btn-${this.variant}`}
          disabled={this.disabled}
        >
        TEst
        </button>

        <div>Helloosssso, World!</div>
      </Host>
    );
  }
}

:host {
  display: inline-block;
}

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <!-- MDUI CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdui/1.0.1/css/mdui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/1.0.1/js/mdui.min.js"></script>

    <script type="module" src="/build/webcomponentsnext.esm.js"></script>
    <script nomodule src="/build/webcomponentsnext.js"></script>
  </head>
  <body>
    <my-component variant="filled" disabled="false"></my-component>
  </body>
</html>

Problem: When I load the page, the button doesn't seem to render with the correct MDUI styles or functionality. The button appears as a normal HTML button without any MDUI styling.

What I’ve Tried: Disabling shadow DOM to ensure global styles (MDUI CSS) are applied. Manually initializing MDUI with mdui.init() inside the componentDidLoad() lifecycle hook. Confirmed that MDUI CSS and JS are properly loaded in the HTML file. Checked that MDUI class names (mdui-btn, mdui-btn-filled, etc.) are correctly applied in the Stencil component.

Upvotes: 0

Views: 30

Answers (1)

TemidoRocha
TemidoRocha

Reputation: 66

You need to import you css file from the library (import 'mdui/mdui.css'; )in your 'my-component.css'. It should be something like this taking int consideration your path: @import(../../node_modules/mdui/mdui.css);

That is why it only works when you chnage the shadow-dom to false.

Upvotes: 0

Related Questions