`useStyles` for Ant Design V5

app.styles.ts

import createStyles from '@/styles/create-styles';

export const useStyles = createStyles((token) => ({
  container: {
    backgroundColor: token.colorBgBase,

    borderRadius: token.borderRadius,
    border: `1px solid ${token.colorBorderSecondary}`,
    color: token.colorText,
  },

  header: {
    display: 'flex',
    alignItems: 'center',
    padding: token.padding,
  },

  info: {
    flexGrow: 1,
  },
  title: {
    fontSize: token.fontSize,
  },
  description: {
    fontSize: token.fontSizeSM,
    color: token.colorTextDescription,
    marginTop: token.marginXS,
  },
  toggle: {},
  body: {
    padding: token.padding,
    borderTop: `1px dashed ${token.colorBorderSecondary}`,
  },
}));

create-styles.ts

import { GlobalToken, theme } from 'antd';
import clsx from 'clsx';
import { css, CSSInterpolation } from '@emotion/css';


type CssValues = Record<string, CSSInterpolation>;

export default function createStyles<T extends CssValues = CssValues, P = void>(
  getCssValues: (token: GlobalToken, params: P) => T,
) {
  function useStyles(params: P) {
    const { token } = theme.useToken();
    const cssValues = getCssValues(token, params);

    const classes = Object.fromEntries(
      Object.entries(cssValues).map(([name, value]) => {
        return [name, css(value)];
      }),
    ) as { [key in keyof T]: string; };

    return {
      classes,
      cx: clsx,
    } as const;
  }

  return useStyles;
}