fix: popover arrow bg with custom color (#39517)

This commit is contained in:
MadCcc 2022-12-13 14:41:24 +08:00 committed by GitHub
parent fe8d59754e
commit a99175db8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -28,6 +28,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
borderRadiusLG: borderRadius,
zIndexPopup,
marginXS,
colorBgElevated,
} = token;
return [
@ -47,6 +48,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
textAlign: 'start',
cursor: 'auto',
userSelect: 'text',
'--antd-arrow-background-color': colorBgElevated,
'&-rtl': {
direction: 'rtl',
@ -82,7 +84,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
},
// Arrow Style
getArrowStyle(token, { colorBg: token.colorBgElevated }),
getArrowStyle(token, { colorBg: 'var(--antd-arrow-background-color)' }),
// Pure Render
{
@ -106,15 +108,12 @@ const genColorStyle: GenerateStyle<PopoverToken> = (token) => {
const lightColor = token[`${colorKey}-6`];
return {
[`&${componentCls}-${colorKey}`]: {
'--antd-arrow-background-color': lightColor,
[`${componentCls}-inner`]: {
backgroundColor: lightColor,
},
[`${componentCls}-arrow`]: {
background: 'transparent',
'&:before': {
backgroundColor: lightColor,
},
},
},
};