Is there any way to style the components without using the prop "style" (inline-style)?

[sawa-ko]

I am currently using ant-design, from previously using @mui/react, but I see that ant-design does not have a component styling system like this, which is quite comfortable and generates a new css according to the styles applied.

I wonder why ant-design doesn't have something similar since they use their own css-in-js tool, and I guess it could be implemented as well.

If so, can someone explain me how to do it?

// @mui/react

<Box pt={2}></Box>

// Result
<div class="default-mui-classes-and-with-the-padding-top-configured"></div>

// ant-design/ant-design

<Flex style{{ paddingTop: 2 }}></Flex>

// Result
<div class="default-ant-design-classes-without-padding-top-configured" style={{ padding-top: 2 }}></div>

[zombieJ]

Ant Design provides the theme for preset token usage. But not provide the shortcut prop since antd has much complex token with its design system:

import { theme } from 'ant-design';

const { token } = theme.useToken();

// You can wrap the component if needed
const wrapComponent = (Component) => {
  const ProxyComponent = ({ pt, style, ...props }) => {
    const { token } = theme.useToken();

    return <Component style={{...style, paddingTop: token[pt]}} {...props} />
  };
};

const MyButton = wrapComponent(Button);

<MyButton pt="paddingXL" />