How do I change the size and border color of <DeviceMockup device="ios"></DeviceMockup>?

[talgolan]

How do I change the size and border color of <DeviceMockup device="ios"></DeviceMockup>?

Per the documentation...

Ios styling: Use the class prop to overwrite div.

I expect the following to display an iOS device mockup with a height = 890px, width = 390px, and red borders.

Unfortunately, what I observe is a "flash" of the correctly sized device mockup, that immediately reverts to the default height and width. I never see the desired red border.

<DeviceMockup device="ios" class="relative mx-auto h-[890px] w-[390px] rounded-[2.5rem] border-[14px] border-red-800 bg-red-800 shadow-xl dark:border-red-800"
>
<div class="h-full w-full bg-amber-300"></div>
</DeviceMockup>

Any assistance and/or guidance would be greatly appreciated.

"devDependencies": {
"@eslint/compat": "1.2.5",
"@sveltejs/adapter-node": "5.2.12",
"@sveltejs/kit": "2.16.1",
"@sveltejs/vite-plugin-svelte": "5.0.3",
"autoprefixer": "10.4.20",
"eslint": "9.18.0",
"eslint-config-prettier": "10.0.1",
"eslint-plugin-svelte": "2.46.1",
"flowbite": "2.5.2",
"flowbite-svelte": "0.47.4",
"flowbite-svelte-icons": "2.0.2",
"globals": "15.14.0",
"prettier": "3.4.2",
"prettier-plugin-svelte": "3.3.3",
"prettier-plugin-tailwindcss": "0.6.10",
"svelte": "5.19.2",
"svelte-check": "4.1.4",
"tailwindcss": "4.0.0",
"typescript": "5.7.3",
"vite": "6.0.9"
},