diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx
index c47b575b98..c238adede9 100644
--- a/components/_util/wave/WaveEffect.tsx
+++ b/components/_util/wave/WaveEffect.tsx
@@ -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) {
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
index e37e5c03b3..125703b9d7 100644
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -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,
diff --git a/components/watermark/useWatermark.ts b/components/watermark/useWatermark.ts
index 2ef5a2ae5b..2db840397d 100644
--- a/components/watermark/useWatermark.ts
+++ b/components/watermark/useWatermark.ts
@@ -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
diff --git a/typings/cssType.d.ts b/typings/cssType.d.ts
new file mode 100644
index 0000000000..f10d9bf3fb
--- /dev/null
+++ b/typings/cssType.d.ts
@@ -0,0 +1,5 @@
+declare namespace React {
+  interface CSSProperties {
+    [key: `--${string | number}`]: string | number | undefined; // 允许 CSS 变量
+  }
+}