ant-design/use-emotion-css

A gadget that combines emotion and antd token

use-emotion-css

A gadget that combines emotion and antd token

import { useEmotionCss } from '@ant-design/use-emotion-css';
import React from 'react';

export default () => {
  const className = useEmotionCss(({ token }) => {
    return {
      color: token.colorPrimary,
      display: 'flex',
      justifyContent: 'center',
      gap: 24,
      padding: 24,
      flexDirection: 'column',
    };
  });
  const blockClassName = useEmotionCss(({ token }) => {
    return {
      backgroundColor: token.colorPrimary,
      width: 12,
      height: 12,
      borderRadius: 12,
    };
  });
  return (
    <div className={className}>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
        }}
      >
        <div className={blockClassName} />
        <span>Hello World</span>
      </div>
    </div>
  );
};

use-emotion-css's Issues

如何指定 container 注入样式

jest test fail

node_modules@ant-design\use-emotion-css\dist\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){import { css } from '@emotion/css';

                                    ^^^^^^
SyntaxError: Cannot use import statement outside a module