Style Custom Addon Panel

[tiny moat]

Hi there - i'm currently trying to render my React Themepalette Component to a Custom Panel that i registered, the content is being displayed but the .scss isnt being applied...
although all of my other scss is being applied to my components...
can anyone help?

also in my panel addon i will want to access one of my custom context.globals.theme and mode but havent quite figured out how...

themecontrols.tsx (used for my theme switching in toolbar)

export const UggThemeProviderDecorator = (Story, context) => {

    const themeType = context.globals.theme
    const themeMode = context.globals.mode

    return (
        <div>
            <UggThemeProvider themeType={themeType} themeMode={themeMode}>
              {Story()}
            </UggThemeProvider>

Problem 1: Addon Panel not being styled by scss
Problem 2: How to get context global

[finite bear]

Hey @tiny moat What version of Storybook are you using?

Also, are you writing this using our addon kit or next to your project

To address Problem 1

Addon panels do not share the same styles as the preview window where components are rendered. This means you'll need to import the styles that you want for the addon panel into the component

To get access to globals in your panel you can use the useGlobals function

More details here:
https://github.com/storybookjs/addon-kit