Custom Styling best practices

[prestonbourne]

Overview

I'm looking for the best practice when styling sandpack, I know there's the @codesandbox/sandpack/unstyled export, however this isn't a viable choice because they aren't modular enough to be interoperable with the regular styled exports. I don't mind styling from scratch, I would just prefer to not have to set syntax highlighting for the editor.

What I want

import {
  SandpackProvider,
  SandpackLayout,
  SandpackPreview,
  SandpackStack,
} from '@codesandbox/sandpack-react/unstyled'
import { SandpackCodeEditor} from '@codesandbox/sandpack-react'
import { sandpackTheme } from '../code-theme'

export function Component() {

  return (
    <SandpackProvider
      template="react-ts"
      theme={sandpackTheme}
    >
      <SandpackLayout >
        <SandpackStack>
          <SandpackPreview />
          <SandpackCodeEditor
            showInlineErrors
            showTabs
            showRunButton
            wrapContent
          />
        </SandpackStack>
      </SandpackLayout>
    </SandpackProvider>
  )
}

This way I could still use theme and have syntax highlighting alongside benefitting rom the editor props such as wrap content etc but I could apply my own classes to everything else. However this throws the error below.

Error: [sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"

Which leads me to believe the SandpackProvider components are incompatible.

What I'm currently trying

To overwrite the default sp- classes from sandpack with my own custom css class. (as a side note, where would I find the other sp- classes do you suggest just reading the source code because i could not locate them in the docs)

import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
  SandpackStack,
} from '@codesandbox/sandpack-react'
import { sandpackTheme } from '../code-theme'

export function Component() {
  return (
    <SandpackProvider
      theme={sandpackTheme}
      options={{ classes: { 'sp-layout': 'ss-block' } }}
    >
      <SandpackLayout>
        <SandpackStack>
          <SandpackPreview />
          <SandpackCodeEditor
            showInlineErrors
            showTabs
            showRunButton
            wrapContent
          />
        </SandpackStack>
      </SandpackLayout>
    </SandpackProvider>
  )
}

However the runtime styles used by the library are overwriting the classes I pass in with the options object.

You can see my css rule ss-block is being overwrriten by sp-c-iKJbEZ

May or may not be helpful

Josh Comeau has a styled sandpack that's pretty close to what I'm looking for.
The new React docs also implement a custom sandpack config however they do the syntax highlighting manually + are using an older verison