fix(QRCode): Fix the issue where the background color and font color … (#47128)

* fix(QRCode): Fix the issue where the background color and font color of the QR code component do not synchronize with the theme in dark mode

* fix(QRCode): Update test snapshot

* fix(QRCode): Remove inline styles, adjust style handling, and regenerate test snapshots

* fix(QRCode): Fix the issue of unreasonable style handling
This commit is contained in:
KAM 2024-01-26 23:08:47 +08:00 committed by GitHub
parent 5bf0b8e17b
commit 63e5e13fda
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,5 @@
import { unit } from '@ant-design/cssinjs'; import { unit } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import { resetComponent } from '../../style'; import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@ -63,15 +64,17 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
}; };
}; };
export const prepareComponentToken: GetDefaultToken<'QRCode'> = () => ({}); export const prepareComponentToken: GetDefaultToken<'QRCode'> = (token) => ({
QRCodeMaskBackgroundColor: new TinyColor(token.colorBgContainer).setAlpha(0.96).toRgbString(),
});
export default genStyleHooks<'QRCode'>( export default genStyleHooks<'QRCode'>(
'QRCode', 'QRCode',
(token) => { (token) => {
const mergedToken = mergeToken<QRCodeToken>(token, { const mergedToken = mergeToken<QRCodeToken>(token, {
QRCodeTextColor: 'rgba(0, 0, 0, 0.88)', QRCodeTextColor: token.colorText,
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
}); });
return genQRCodeStyle(mergedToken); return genQRCodeStyle(mergedToken);
}, },
prepareComponentToken, prepareComponentToken,