How to style the Sandapackpreview Background and how to have dynamic height ?

[automationghost]

I want to change the default white background of the Sandpackpreview ... also when using height 100% it does not apply ... what is the correct way for making the SandpackPreview take the height of its parent container ?

import React from "react";
import { SandpackProvider, SandpackPreview, SandpackCodeEditor } from "@codesandbox/sandpack-react";

interface SandPackPreviewProps {
  componentData: { code_output?: string };
}


const scrollbarStyle = {
  '&::-webkit-scrollbar': {
    width: '10px',
    height: '10px',
  },
  '&::-webkit-scrollbar-track': {
    background: '#2b2b2b',
  },
  '&::-webkit-scrollbar-thumb': {
    background: '#6b6b6b',
    borderRadius: '4px',
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: '#555',
  },
  scrollbarWidth: 'thin',
  scrollbarColor: '#6b6b6b #2b2b2b',
};

const SandPackPreview: React.FC<SandPackPreviewProps> = ({ componentData }) => {
  return (
    <div style={{ width: '100%', height: '100%', maxHeight:'100%',   overflow: 'auto'}}>
      <SandpackProvider
        template="react"
        files={{
          "/App.js": componentData?.code_output || '',
          "style.css": `body: { background: #8C4A77 }`,
        }}
        customSetup={{
          dependencies: {
            "react": "latest",
            "react-dom": "latest",
            "@mui/material": "latest",
            "@mui/system": "latest",
            "@emotion/react": "latest",
            "@emotion/styled": "latest",
          },
        }}
        theme={{
          colors: {
            surface1: "#2E1B2B", // Changes default background color of the preview
            accent: "#8C4A77",   // Accent color
          },
          syntax: {
            tag: "#006400",
            string: "rgb(255, 165, 0)",
            plain: "tomato",
          },
        }}
      >
        {/* Code Editor with options */}
{/*         <SandpackCodeEditor
          showLineNumbers
          wrapContent
          style={{
            height: '400px', // Fixed height for the editor
            width: '100%',
          }}
        /> */}

        {/* Preview component */}
        <SandpackPreview
style={{  height: '100%' ,   }}  showOpenInCodeSandbox={false}
        />
      </SandpackProvider>


    </div>
  );
};

export default SandPackPreview;

or rather there is some margin in the iframes body ... which i dont know how to get rid of