你在 Vue3 + Element Plus + TypeScript 项目中，给标签设置 style 属性时报错：

❌ type check failed for prop 'style'. Expected Object, got String.

这是一个典型的类型不匹配问题。
我们再次请出 DeepSeek 风格来进行系统解析。

🧠 1. 问题来源解析（Type Check Failed）

Vue 中 style 属性的类型可以是：

type StyleValue = string | CSSProperties | (string | CSSProperties)[];

但如果你在组件中通过 props 传递 style，并在声明中写错类型，就会触发这个报错。

❌ 错误示范

<!-- 父组件 -->
<MyTag :style="'color: red'" />

<!-- 子组件 props -->
defineProps<{
  style: string;
}>();

Vue 会提示你 type check failed，因为真正传进去的是字符串，但你声明为 object 或 vice versa。

✅ 2. 正确做法（DeepSeek 风修复）

✔ 方式一：传递对象格式的 style（推荐）

<!-- 父组件传递 style -->
<MyTag :style="{ color: 'red', fontSize: '14px' }" />

// 子组件中 props 类型应该是：
defineProps<{
  style?: CSSProperties; // 来自 vue 类型定义
}>();

你需要引入 Vue 类型：

import type { CSSProperties } from 'vue';

✔ 方式二：传字符串也没问题（动态绑定）

<MyTag style="color: red; font-size: 16px;" />

⚠️ 这不是 :style，而是普通的 HTML 属性字符串写法，不涉及类型检查。

🧩 3. 常见场景对比

场景写法说明
内联对象:style="{ color: 'red' }"类型为 CSSProperties
字符串样式style="color: red;"类型为 string，不建议通过 props 传递
动态 props:style="computedStyle"确保 computed 的类型是 CSSProperties

💬 DeepSeek 风格小结

你以为传了一个“样式”，其实类型检查想要的是一个“CSSProperties”对象，而不是一段 HTML 字符串。

  • ✅ style 推荐用对象形式传递（{}）。
  • ⚠️ 如果你用 props 接收 style，类型必须明确声明为 CSSProperties。
  • 🚫 别把 "color: red;" 直接当作 props 传给绑定 style。

✅ 正确写法一览

✅ 用对象绑定 style

<MyTag :style="{ color: 'red', fontSize: '14px' }" />

defineProps<{
  style?: CSSProperties;
}>();

✅ Vue 组件中动态设置

<template>
  <div :style="styleObj">Hello</div>
</template>

<script setup lang="ts">
const styleObj: CSSProperties = {
  color: 'green',
  fontSize: '16px',
};
</script>

📦 Bonus：结合 ElementPlus 组件设置样式

<el-button :style="{ backgroundColor: 'orange', color: 'white' }">
  自定义按钮
</el-button>