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:
lijianan 2025-02-13 15:25:21 +08:00 committed by GitHub
parent f6797c4964
commit 069dba8abd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 9 deletions

View File

@ -41,14 +41,12 @@ const WaveEffect = (props: WaveEffectProps) => {
const [height, setHeight] = React.useState(0);
const [enabled, setEnabled] = React.useState(false);
const waveStyle = {
const waveStyle: React.CSSProperties = {
left,
top,
width,
height,
borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
} as React.CSSProperties & {
[name: string]: number | string;
};
if (color) {

View File

@ -68,10 +68,10 @@ export const handleGradient = (
if (Object.keys(rest).length !== 0) {
const sortedGradients = sortGradient(rest as StringGradients);
const background = `linear-gradient(${direction}, ${sortedGradients})`;
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
return { background, [LineStrokeColorVar]: background };
}
const background = `linear-gradient(${direction}, ${from}, ${to})`;
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
return { background, [LineStrokeColorVar]: background };
};
const Line: React.FC<LineProps> = (props) => {
@ -113,7 +113,7 @@ const Line: React.FC<LineProps> = (props) => {
borderRadius,
};
const percentStyle = {
const percentStyle: React.CSSProperties = {
width: `${validProgress(percent)}%`,
height,
borderRadius,

View File

@ -10,9 +10,9 @@ export const BaseSize = 2;
export const FontGap = 3;
// Prevent external hidden elements from adding accent styles
const emphasizedStyle = {
const emphasizedStyle: React.CSSProperties = {
visibility: 'visible !important',
};
} as unknown as React.CSSProperties;
export type AppendWatermark = (
base64Url: string,
@ -44,7 +44,7 @@ export default function useWatermark(
...markStyle,
backgroundImage: `url('${base64Url}')`,
backgroundSize: `${Math.floor(markWidth)}px`,
...(emphasizedStyle as React.CSSProperties),
...emphasizedStyle,
}),
);
// Prevents using the browser `Hide Element` to hide watermarks

5
typings/cssType.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
declare namespace React {
interface CSSProperties {
[key: `--${string | number}`]: string | number | undefined; // 允许 CSS 变量
}
}