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 [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) {

View File

@ -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,

View File

@ -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
View File

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