mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-13 04:53:11 +08:00
fix: skeleton node should have bg color (#38248)
* fix: skeleton node should have bg color * chore: code clean
This commit is contained in:
parent
25020026de
commit
28396d6b9c
@ -1,6 +1,7 @@
|
|||||||
import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
|
import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import useStyle from './style';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import type { SkeletonElementProps } from './Element';
|
import type { SkeletonElementProps } from './Element';
|
||||||
|
|
||||||
@ -13,6 +14,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
|
|||||||
const { prefixCls: customizePrefixCls, className, style, active, children } = props;
|
const { prefixCls: customizePrefixCls, className, style, active, children } = props;
|
||||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||||
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
|
|
||||||
const cls = classNames(
|
const cls = classNames(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
@ -20,17 +22,18 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
|
|||||||
{
|
{
|
||||||
[`${prefixCls}-active`]: active,
|
[`${prefixCls}-active`]: active,
|
||||||
},
|
},
|
||||||
|
hashId,
|
||||||
className,
|
className,
|
||||||
);
|
);
|
||||||
|
|
||||||
const content = children ?? <DotChartOutlined />;
|
const content = children ?? <DotChartOutlined />;
|
||||||
|
|
||||||
return (
|
return wrapSSR(
|
||||||
<div className={cls}>
|
<div className={cls}>
|
||||||
<div className={classNames(`${prefixCls}-image`, className)} style={style}>
|
<div className={classNames(`${prefixCls}-image`, className)} style={style}>
|
||||||
{content}
|
{content}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user