[feature request] Support sx prop like the MUI v5 for Antd v5

[kytosai]

What problem does this feature solve?

Consider the addition of the sx prop like the MUI v5 for the Antd v5

Through the process of using antd v5, I found everything to be great. However, there will be annoying problems when it is necessary to integrate with css frameworks like tailwindcss.

I have been using React MUI v5, and I find the sx prop to be a great alternative to using less, scss, tailwindcss (somewhat),... to custom style Antd components more quickly, plus it also supports styles for subclasses right in sx props

Suppose I use the antd's Alert Component as follows

const AntdPage = () => {
  return (
    <>
      <Alert message="content message" />
    </>
  );
};

Then HTML was born on the browser as follows

<div class="ant-alert ant-alert-info ant-alert-no-icon">
  <div class="ant-alert-content">
    <div class="ant-alert-message">content message</div>
  </div>
</div>

And now to be able to custom style for div has class ant-alert-contents and ant-alert-message. I can do in the following way if there is sx prop like the React MUI v5

const AntdPage = () => {
  return (
    <>
      <Alert 
        sx={{
          '& .ant-alert-contents': {
            background: 'yellow';
            '&:hover .ant-alert-message': {
              color: 'blue',
            }
          },
          '& .ant-alert-message': {
            color: red;
          }
        }}
        message="content message" 
      />
    </>
  );
};

And for long -term convenience, if there is a component like Box of the Mui, is a wrapper for div/span ... any tag html will help us to be more flexible in the style for antd
Here is an example

const AntdPage = () => {
  const { token } = useToken();
  const isEnable = true;

  return (
    <>
      <Box
        component="div"
        sx={{
          '& .child': {
            backgroundColor: isEnable ? token.colorPrimary : token.colorSuccess, // easy for customize with state and token
          }
        }}
      >
        This is a{' '}
        <Box component="span" class="child" sx={{ color: 'blue' }}>
          component
        </Box>
      </Box>

      <Box
        component="section"
        sx={{
          marginTop: '16px',
          background: 'green',
        }}
      >
        <Button type="ghost">Cancel</Button>
        <Button sx={{ marginLeft: '8px' }} type="primary">Confirm</Button>
      </Box>
    </>
  );
};

I think this will be a great solution for the style in the ANTD to be easier and more wonderful

What does the proposed API look like?

• New ant design version 5.0.0 is confilicting with tailwindcss #38794
• https://mui.com/system/getting-started/the-sx-prop/
• https://mui.com/material-ui/react-box/

Related topic

• How to correctly customize/style components in version 5? #40783

[arvinxx]

Maybe you can waiting for #40221

[kytosai]

Maybe you can waiting for #40221

I think the solution in #40221 doesn't have the flexibility to change the style like sx prop.

For example, if I need to style the :hover feature from the root class and change the style of the children element class, just adding a custom class/style for the children element is not enough.

[arvinxx]

it can work with cssinjs library like emotion right now(example: https://emotion.sh/docs/css-prop#object-styles). it don't need antd to make this feature.

/** @jsx jsx */
import { jsx } from '@emotion/react'

const AntdPage = () => {
return (
  <>
    <Alert 
      css={{
        '& .ant-alert-contents': {
          background: 'yellow';
          '&:hover .ant-alert-message': {
            color: 'blue',
          }
        },
        '& .ant-alert-message': {
          color: red;
        }
      }}
      message="content message" 
    />
  </>
);
};

[arvinxx]

Beside, antd v5 based on css-in-js , it might be a good way to use a cssinjs style solution. And we are working on this(#40489)

And it will be used like this:

import { createStyles } from "antd-style";


const useStyles = createStyles(({ token }, isEnable) => ({
  alert: {
    '& .ant-alert-contents': {
      // also easy for customize with state and token
      backgroundColor: isEnable ? token.colorPrimary : token.colorSuccess,
      '&:hover .ant-alert-message': {
        color: 'blue',
      },
    },
    '& .ant-alert-message': {
      color: 'red',
    },
  },
}));

const AntdPage = () => {
  const isEnable = true;
  const { styles } = useStyles(isEnable);

  return (
    <>
      <Alert className={styles.alert} message="content message" />
    </>
  );
};

Here is a demo: https://codesandbox.io/s/stupefied-darkness-nspqto?file=/App.tsx

[thuynh]

@arvinxx I'm currently using this and it's great. However, when I try to build the project, this is what I'm getting. Any idea on how to resolve this? I'm using node version 15.14.0. I upgrade all the way to 17.9.1 and still didn't build.

./node_modules/antd-style/lib/core/createEmotion.d.ts:1:41
Type error: ',' expected.

> 1 | export { default as createEmotion, type Emotion } from '@emotion/css/create-instance';
    |                                         ^
  2 | 

[arvinxx]

@arvinxx I'm currently using this and it's great. However, when I try to build the project, this is what I'm getting. Any idea on how to resolve this? I'm using node version 15.14.0. I upgrade all the way to 17.9.1 and still didn't build.

./node_modules/antd-style/lib/core/createEmotion.d.ts:1:41

Type error: ',' expected.



> 1 | export { default as createEmotion, type Emotion } from '@emotion/css/create-instance';

    |                                         ^

  2 | 

Report a bug to antd-style?