From 469754ba69df50804aeae9bde7d2747be75b296a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 27 Dec 2022 17:42:01 +0800
Subject: [PATCH 1/5] fix: fix style

---
 components/qrcode/index.tsx      | 2 +-
 components/qrcode/style/index.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
index f905ed784115..adab02c7af6c 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="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 0cb4e323d740..2c5ceda59906 100644
--- a/components/qrcode/style/index.ts
+++ b/components/qrcode/style/index.ts
@@ -17,6 +17,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 +39,9 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
         lineHeight: token.lineHeight,
         background: token.QRCodeMaskBackgroundColor,
         textAlign: 'center',
+        [`& > .expired`]: {
+          color: 'rgba(0, 0, 0, 0.88)',
+        },
       },
       '&-icon': {
         marginBlockEnd: token.marginXS,

From c76ef7977804d6d034a8a66f4eda59e7fa457844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 27 Dec 2022 17:57:08 +0800
Subject: [PATCH 2/5] snap

---
 .../qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap   | 4 +++-
 components/qrcode/__tests__/__snapshots__/demo.test.ts.snap   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
index c2153a7540ac..bc1149522537 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="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 333bae00d275..c126c37c2e35 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="expired"
+        >
           QR code expired
         </p>
         <button

From 63bab4b56fa16f38d8b513764fa0484be37f71d4 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 27 Dec 2022 18:48:23 +0800
Subject: [PATCH 3/5] Update components/qrcode/style/index.ts

Co-authored-by: afc163 <afc163@gmail.com>
---
 components/qrcode/style/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts
index 2c5ceda59906..35e9392c13da 100644
--- a/components/qrcode/style/index.ts
+++ b/components/qrcode/style/index.ts
@@ -39,7 +39,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
         lineHeight: token.lineHeight,
         background: token.QRCodeMaskBackgroundColor,
         textAlign: 'center',
-        [`& > .expired`]: {
+        [`& > ${componentCls}-expired`]: {
           color: 'rgba(0, 0, 0, 0.88)',
         },
       },

From caae8e1025adf1abc72c4bcfcebc9f106c0e6ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 27 Dec 2022 18:55:54 +0800
Subject: [PATCH 4/5] rename className

---
 .../qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap     | 2 +-
 components/qrcode/__tests__/__snapshots__/demo.test.ts.snap     | 2 +-
 components/qrcode/index.tsx                                     | 2 +-
 3 files changed, 3 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 bc1149522537..0f23ac7e4dcf 100644
--- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -362,7 +362,7 @@ exports[`renders ./components/qrcode/demo/status.tsx extend context correctly 1`
         class="ant-qrcode-mask"
       >
         <p
-          class="expired"
+          class="ant-qrcode-expired"
         >
           QR code expired
         </p>
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
index c126c37c2e35..29ab446eb5c6 100644
--- a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
@@ -322,7 +322,7 @@ exports[`renders ./components/qrcode/demo/status.tsx correctly 1`] = `
         class="ant-qrcode-mask"
       >
         <p
-          class="expired"
+          class="ant-qrcode-expired"
         >
           QR code expired
         </p>
diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
index adab02c7af6c..fc7e828c0782 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 className="expired">{locale.expired}</p>
+                  <p className={`${prefixCls}-expired`}>{locale.expired}</p>
                   {typeof onRefresh === 'function' && (
                     <Button type="link" icon={<ReloadOutlined />} onClick={onRefresh}>
                       {locale.refresh}

From ebc77a0376140bb6870f9dba4d89d13ae8b2b7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 27 Dec 2022 19:06:49 +0800
Subject: [PATCH 5/5] use token

---
 components/qrcode/style/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts
index 35e9392c13da..bde2a2414276 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;
 }
 
@@ -40,7 +41,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
         background: token.QRCodeMaskBackgroundColor,
         textAlign: 'center',
         [`& > ${componentCls}-expired`]: {
-          color: 'rgba(0, 0, 0, 0.88)',
+          color: token.QRCodeExpiredTextColor,
         },
       },
       '&-icon': {
@@ -57,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)',
     }),
   ),