lwc LightningModal - hide x button

Question

Is it possible to hide 'x' button

import { api } from 'lwc';
import LightningModal from 'lightning/modal';
import { PREVIEW_MARKUP } from 'c/constants';

export default class EmailPreviewMainModal extends LightningModal {
    @api content;
    renderedCallback() {
        this.template.querySelector('.container').innerHTML = PREVIEW_MARKUP;
    }
    handleOkay() {
        this.close();
    }
} 



EmailPreviewMainModal.open({
                size: 'small',
                label: 'Custom one',
            });

Answer 1

Yes it is possible to hide the X button in a lightning-modal element. You will just need to override the style within a CSS file, save it as a static resource in your org, and import the file in your LWC.

To start, this is the exact styling that worked for me to remove the X button:

lightning-button-icon.slds-modal__close {
    display: none;
}

Once you've added this snippet to your CSS file and saved it as a static resource, import it into your LWC like so:

import { loadStyle } from 'lightning/platformResourceLoader';

import globalStylesheet from '@salesforce/resourceUrl/nameOfYourCSSFileStaticResource';

Lastly, just use the loadStyle import in the connectedCallback() of your LWC javascript file and that should do it!

connectedCallback() {
    loadStyle(this, globalStylesheet);
}