How can I change the background of a custom modal?

[avecalme]

I want to change the props of the parent. Can you tell me how to do it?
I executed the code below, but the background color is not changing.

Thanks!

const modalComponent: ModalComponent = {
        ref: MyCustomComponent,
        props: { background: 'bg-red-500' },
        slot: '<p>Skeleton</p>'
    };
    
    const d: ModalSettings = {
        type: 'component',
        component: modalComponent,
        title: 'HI',
        body: `message`,
        response: async (r: boolean) => {
            console.log('ModalSettings', r);
        }
    };
    modalStore.trigger(d);

MyCustomComponent.svelte

<script lang="ts">
    import { modalStore } from '@skeletonlabs/skeleton';
    // Props
    /** Exposes parent props to this component. */
    export let parent: any;
</script>

{#if $modalStore[0]}
    <div class="modal-example-form {parent.background} ">
        <!-- some content -->
    </div>
{/if}

[Sarenor]

You need to define the background in the <Modal> tag:

<Modal background="my-fancy-background-color-class"/>

Helpful link to the Modal source to check for yourself:
https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/Modal.svelte#L35

[avecalme]

Thanks for the response!

[endigo9740]

@avecalme think of component modals as custom modals. There's a couple ways to go about this:

Method 1 - using the props object

When you're passing props: { background: 'bg-red-500' }, what we're doing is taking the component definition you've provided (reference, props, slot) and dynamically constructing that component for your within the Modal component on-demand using <svelte:component>.

In order to access the props value within your custom component, you have to setup your component to accept that prop as you would for any custom component:

export let background: string = 'someDefaultValue'

Then you can use background as a proper within your custom generated component.

To be honest, there's not a lot of benefit to this method over just hardcoding the color within your custom modal component, unless you need it to change per component instance.

Method 2 - using the global prop value

The instruction @Sarenor provided above will provide the background to canned modals by default (alert, confirm, prompt), but for custom component modals you'll have to go through a couple extra steps within your custom component:

1. Accept the parent property, which allows you access any standard props set globally:

export let parent: any

2. Utilize the value provided within your template, which is accessed via:

parent.background

[avecalme]

Really appreciate your detailed answer! Thank you.