mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
type: React.CSSProperties shoule support CSS var (#52721)
* type: React.CSSProperties shoule support CSS var * fix: fix * fix: fix * fix: fix * fix: fix
This commit is contained in:
parent
f6797c4964
commit
069dba8abd
@ -41,14 +41,12 @@ const WaveEffect = (props: WaveEffectProps) => {
|
|||||||
const [height, setHeight] = React.useState(0);
|
const [height, setHeight] = React.useState(0);
|
||||||
const [enabled, setEnabled] = React.useState(false);
|
const [enabled, setEnabled] = React.useState(false);
|
||||||
|
|
||||||
const waveStyle = {
|
const waveStyle: React.CSSProperties = {
|
||||||
left,
|
left,
|
||||||
top,
|
top,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
|
borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
|
||||||
} as React.CSSProperties & {
|
|
||||||
[name: string]: number | string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (color) {
|
if (color) {
|
||||||
|
@ -68,10 +68,10 @@ export const handleGradient = (
|
|||||||
if (Object.keys(rest).length !== 0) {
|
if (Object.keys(rest).length !== 0) {
|
||||||
const sortedGradients = sortGradient(rest as StringGradients);
|
const sortedGradients = sortGradient(rest as StringGradients);
|
||||||
const background = `linear-gradient(${direction}, ${sortedGradients})`;
|
const background = `linear-gradient(${direction}, ${sortedGradients})`;
|
||||||
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
|
return { background, [LineStrokeColorVar]: background };
|
||||||
}
|
}
|
||||||
const background = `linear-gradient(${direction}, ${from}, ${to})`;
|
const background = `linear-gradient(${direction}, ${from}, ${to})`;
|
||||||
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
|
return { background, [LineStrokeColorVar]: background };
|
||||||
};
|
};
|
||||||
|
|
||||||
const Line: React.FC<LineProps> = (props) => {
|
const Line: React.FC<LineProps> = (props) => {
|
||||||
@ -113,7 +113,7 @@ const Line: React.FC<LineProps> = (props) => {
|
|||||||
borderRadius,
|
borderRadius,
|
||||||
};
|
};
|
||||||
|
|
||||||
const percentStyle = {
|
const percentStyle: React.CSSProperties = {
|
||||||
width: `${validProgress(percent)}%`,
|
width: `${validProgress(percent)}%`,
|
||||||
height,
|
height,
|
||||||
borderRadius,
|
borderRadius,
|
||||||
|
@ -10,9 +10,9 @@ export const BaseSize = 2;
|
|||||||
export const FontGap = 3;
|
export const FontGap = 3;
|
||||||
|
|
||||||
// Prevent external hidden elements from adding accent styles
|
// Prevent external hidden elements from adding accent styles
|
||||||
const emphasizedStyle = {
|
const emphasizedStyle: React.CSSProperties = {
|
||||||
visibility: 'visible !important',
|
visibility: 'visible !important',
|
||||||
};
|
} as unknown as React.CSSProperties;
|
||||||
|
|
||||||
export type AppendWatermark = (
|
export type AppendWatermark = (
|
||||||
base64Url: string,
|
base64Url: string,
|
||||||
@ -44,7 +44,7 @@ export default function useWatermark(
|
|||||||
...markStyle,
|
...markStyle,
|
||||||
backgroundImage: `url('${base64Url}')`,
|
backgroundImage: `url('${base64Url}')`,
|
||||||
backgroundSize: `${Math.floor(markWidth)}px`,
|
backgroundSize: `${Math.floor(markWidth)}px`,
|
||||||
...(emphasizedStyle as React.CSSProperties),
|
...emphasizedStyle,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
// Prevents using the browser `Hide Element` to hide watermarks
|
// Prevents using the browser `Hide Element` to hide watermarks
|
||||||
|
5
typings/cssType.d.ts
vendored
Normal file
5
typings/cssType.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
declare namespace React {
|
||||||
|
interface CSSProperties {
|
||||||
|
[key: `--${string | number}`]: string | number | undefined; // 允许 CSS 变量
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user