'How to add a Modal popup to lit element Project

I am developing a project using lit. Already developed two web components using lit. I need to add image gallery, carousal, and also modal popup to open when click on a button inside those components. And I saw that https://opensource.adobe.com/spectrum-web-components/components/card/ has already developed those components using lit. I installed one of those component to my lit project. But styles are no showing.

The question is, can I use those spectrum web components to lit project and why is styling now working.

Here is my component code with spectrum button,

import { LitElement, html, css} from 'lit';

import '@spectrum-web-components/button/sp-button.js';
import '@spectrum-web-components/button/sp-clear-button.js';
import { Button, ClearButton } from '@spectrum-web-components/button';

class plans_component extends LitElement {

    static properties = {
       ...
    }

    static styles = [
        ...

    ]
    


    constructor() {
        super();
...

    }

    render() {


        return html `
        <sp-button size="xl">Extra Large</sp-button>


       
       `
    }


}
    

customElements.define('plans-component', plans_component);

Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source