Pass styleConfig part styles to custom ClassName props

Feature request

Is your feature request related to a problem? Please describe.

I am trying to style a component from an external library using Chakra multipart component theming, the component has multiple className props for each of it’s part I want to pass the part styles from the styleConfig to the part className.

Describe the solution you’d like

I want to be able to do something similar to this

export const CustomComponent= () => {
    const styles = useStyleConfig('CustomComponent', {});
    return (
        <ExternalComponent 
          className={styles.container}
          wrapperClassName={styles.wrapper}
          // or 
          otherClassName={sx(styles.other)}  />
    );
};

Is this already possible? if so maybe we could add this to the docs.

If it’s not, what is the recommended alternative?

Describe alternatives you’ve considered

I can just write CSS classNames but I wanted to use the design tokens from the theme

[ruddi10]

 Hey its working now I replaced $.class with .class

[hazem3500]

I’ve ended up doing what @TheThirdRace suggested above, forgot to close the issue though 😅.

Thanks @TheThirdRace & @with-heart