From d2d37bda21c11a261801b3522dc39fcbf4f7009d Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 27 Dec 2022 19:22:59 +0800
Subject: [PATCH] fix: fix QRCode style (#39849)

* fix: fix style

* snap

* Update components/qrcode/style/index.ts

Co-authored-by: afc163 <afc163@gmail.com>

* rename className

* use token

Co-authored-by: afc163 <afc163@gmail.com>
---
 .../qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap | 4 +++-
 components/qrcode/__tests__/__snapshots__/demo.test.ts.snap | 4 +++-
 components/qrcode/index.tsx                                 | 2 +-
 components/qrcode/style/index.ts                            | 6 ++++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
index c2153a7540..0f23ac7e4d 100644
--- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -361,7 +361,9 @@ exports[`renders ./components/qrcode/demo/status.tsx extend context correctly 1`
       <div
         class="ant-qrcode-mask"
       >
-        <p>
+        <p
+          class="ant-qrcode-expired"
+        >
           QR code expired
         </p>
         <button
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
index 333bae00d2..29ab446eb5 100644
--- a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
@@ -321,7 +321,9 @@ exports[`renders ./components/qrcode/demo/status.tsx correctly 1`] = `
       <div
         class="ant-qrcode-mask"
       >
-        <p>
+        <p
+          class="ant-qrcode-expired"
+        >
           QR code expired
         </p>
         <button
diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
index f905ed7841..fc7e828c07 100644
--- a/components/qrcode/index.tsx
+++ b/components/qrcode/index.tsx
@@ -80,7 +80,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
               {status === 'loading' && <Spin />}
               {status === 'expired' && (
                 <>
-                  <p>{locale.expired}</p>
+                  <p className={`${prefixCls}-expired`}>{locale.expired}</p>
                   {typeof onRefresh === 'function' && (
                     <Button type="link" icon={<ReloadOutlined />} onClick={onRefresh}>
                       {locale.refresh}
diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts
index 0cb4e323d7..bde2a24142 100644
--- a/components/qrcode/style/index.ts
+++ b/components/qrcode/style/index.ts
@@ -5,6 +5,7 @@ import { resetComponent } from '../../style';
 export interface ComponentToken {}
 
 interface QRCodeToken extends FullToken<'QRCode'> {
+  QRCodeExpiredTextColor: string;
   QRCodeMaskBackgroundColor: string;
 }
 
@@ -17,6 +18,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
       justifyContent: 'center',
       alignItems: 'center',
       padding: token.paddingSM,
+      backgroundColor: token.colorWhite,
       borderRadius: token.borderRadiusLG,
       border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
       position: 'relative',
@@ -38,6 +40,9 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
         lineHeight: token.lineHeight,
         background: token.QRCodeMaskBackgroundColor,
         textAlign: 'center',
+        [`& > ${componentCls}-expired`]: {
+          color: token.QRCodeExpiredTextColor,
+        },
       },
       '&-icon': {
         marginBlockEnd: token.marginXS,
@@ -53,6 +58,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
 export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
   genQRCodeStyle(
     mergeToken<QRCodeToken>(token, {
+      QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)',
       QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
     }),
   ),