feat: qrcode canvas supports style configuration

components/qr-code/__tests__/index.test.tsx

@@ -94,4 +94,10 @@ describe('QRCode test', () => {
       'width: 100px; height: 80px',
     );
   });
+  it('correct style order for canvas', () => {
+    const { container } = render(<QRCode value="test" style={{ width: '100%' }} />);
+    expect(container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')).toHaveStyle(
+      'width: 100%',
+    );
+  });
 });

components/qr-code/index.en-US.md

@@ -48,6 +48,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` |
 | status | QRCode status | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 |
 | onRefresh | callback | `() => void` | - |
+| variant | Variants of QRCode | `borderless` | 5.16.2 |
 
 ## Design Token
 

components/qr-code/index.tsx

@@ -12,6 +12,7 @@ import Spin from '../spin';
 import { useToken } from '../theme/internal';
 import type { QRCodeProps, QRProps } from './interface';
 import useStyle from './style/index';
+import useVariant from '../form/hooks/useVariants';
 
 const QRCode: React.FC<QRCodeProps> = (props) => {
   const [, token] = useToken();
@@ -31,8 +32,10 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     rootClassName,
     prefixCls: customizePrefixCls,
     bgColor = 'transparent',
+    variant: customVariant,
   } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
   const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -52,7 +55,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     level: errorLevel,
     bgColor,
     fgColor: color,
-    style: { width: undefined, height: undefined },
+    style: { width: style?.width, height: style?.height },
     imageSettings: icon ? imageSettings : undefined,
   };
 
@@ -75,7 +78,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
   }
 
   const mergedCls = classNames(prefixCls, className, rootClassName, hashId, cssVarCls, {
-    [`${prefixCls}-borderless`]: !bordered,
+    [`${prefixCls}-borderless`]: !bordered || (enableVariantCls && variant === 'borderless'),
   });
 
   const mergedStyle: React.CSSProperties = {

components/qr-code/index.zh-CN.md

@@ -49,6 +49,7 @@ tag: 5.1.0
 | errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` |
 | status | 二维码状态 | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 |
 | onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
+| variant | 形态变体 | `borderless` | 5.16.2 |
 
 ## 主题变量（Design Token）
 

components/qr-code/interface.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { Variant } from '../form/hooks/useVariants';
 
 interface ImageSettings {
   src: string;
@@ -34,4 +35,5 @@ export interface QRCodeProps extends QRProps {
   errorLevel?: 'L' | 'M' | 'Q' | 'H';
   status?: 'active' | 'expired' | 'loading' | 'scanned';
   onRefresh?: () => void;
+  variant?: Variant;
 }