Prioritization error regarding custom style

[AQian0]

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

I configured Sandpack as follows

import { Sandpack } from "@codesandbox/sandpack-react";

import "./playground.css";

const Playground = () => {
  const files = {};
  return (
    <div className="h-screen flex flex-col">
      <div className="h-16"></div>
      <Sandpack
        files={files}
        theme="light"
        template="vite-vue"
        options={{
          editorHeight: "auto",
          classes: {
            "sp-wrapper": "playgroundWrapper",
            "sp-layout": "playgroundLayout",
          },
        }}
      />
    </div>
  );
};

When the css file is as follows, custom style cannot take effect, even if it already appears inside the tag.

.playgroundWrapper {
  flex: 1;
}
.playgroundLayout {
  height: 100%;
}

However, adding !important to the css file makes it work.

What steps can we take to reproduce the problem?

Simply add the above two files to Remix in Vite. It's worth noting that I use Unocss, which may have some effect on it. But I found someone on StackOverflow with a similar problem at the following link: https://stackoverflow.com/questions/76650300/how-to-style-sandpack

Your Environment

Software	Name/Version
Sandpack-client version
Sandpack-react version	2.13.5
Browser	122.0
Operating System	Windows 11