🧐 Using with class components

[dashqa]

Any chance of using this library with class components? I tried to make HOC that passes useStyle hook properties to the class component, but now it's not possible to pass classname like className={styles.name} because antd-style generates random class name.

[arvinxx]

maybe I can add a method like withStyle HOC to support class Component ?

[dashqa]

I think the HOC implementation would be helpful to other developers and is included in the antd-style package.

I have already implemented it as follows:

const withStyles = (WrappedComponent, useStyles) => {
  const WithProps = React.memo((props) => {
    return <WrappedComponent {...props} />;
  });

  function WithStyles(props) {
    const styleProps = useStyles(props);
    const themeModeProps = useThemeMode();
    const responsiveProps = useResponsive();

    const styles = useMemo(
      () => ({
        ...styleProps,
        theme: themeModeProps,
        responsive: responsiveProps,
      }),
      [styleProps, themeModeProps, responsiveProps]
    );

    return <WithProps {...props} _style={styles} />;
  }

  return WithStyles;
};

export default withStyles;