diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index 62ccdb59974..70ed9f35399 100644
--- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -143,10 +143,16 @@ describe('ssr: renderStyle', () => {
     expect(
       ssrRenderAttrs({
         style: {
-          color: 'red'
+          color: 'red',
+          '--37b1dc3d-numberValue': 2,
+          '--37b1dc3d-stringValue': 'str',
+          '--37b1dc3d-undefinedValue': undefined,
+          '--37b1dc3d-booleanValue': true
         }
       })
-    ).toBe(` style="color:red;"`)
+    ).toBe(
+      ` style="color:red;--37b1dc3d-numberValue:2;--37b1dc3d-stringValue:str;--37b1dc3d-undefinedValue:undefined;--37b1dc3d-booleanValue:true;"`
+    )
   })
 
   test('standalone', () => {
diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index cab8090692e..dd18c4b7366 100644
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -50,10 +50,12 @@ export function stringifyStyle(
   }
   for (const key in styles) {
     const value = styles[key]
-    const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
+    const isStyleVar = key.startsWith('--')
+    const normalizedKey = isStyleVar ? key : hyphenate(key)
     if (
       isString(value) ||
-      (typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey))
+      (typeof value === 'number' && isNoUnitNumericStyleProp(normalizedKey)) ||
+      isStyleVar
     ) {
       // only render valid values
       ret += `${normalizedKey}:${value};`