How to style custom control components in Sidebar?

Developer Support
1

Hi folks, I have a question how to style the control components for Sidebar.

I have a Component with use Chakra as UI library:

const ControlComp = () => (
    <ChakraProvider>
        <Box pl="lg" bg="yellow.100">
          Container
        </Box>
    </ChakraProvider>)

Then I register the component in Plasmic:

PLASMIC.registerComponent(Component, {
  name: "Component",

  props: {
    customProps: {
      type: "custom",
      control: ControlComp,
    },
  },
})

The issue that style is not applied for ControlComp in sidebar. Component uses the Chakra style and it works there.

Any ideas why it doesn’t work?

2

Do you know how chakra emits styles? Is this a solution that dynamically injects styles at runtime, or does it rely on some style sheet to get included?