React 的 style 属性必须传入驼峰命名的 JavaScript 对象，如 backgroundColor: 'red'；不支持连字符、字符串形式或 !important；数值单位可省略 px（限像素属性），动态样式应组合对象而非拼接字符串，且无法响应式或继承。
React 中的 style 属性不接受 CSS 字符串，必须传入一个 JavaScript 对象——这是最常被初学者卡住的第一步。错写成 style="color: red" 或 style={{'color': 'red'}}（引号多余）都会导致样式不生效或报错。
style 属性必须是纯 JS 对象，且键名用驼峰命名
React 的 style 是对 DOM element.style 的封装，所以它沿用原生 JS 的属性命名规则：比如 background-color → backgroundColor，font-size → fontSize，z-index → zIndex。
常见错误包括：
- 写成连字符形式：
style={{'background-color': 'red'}}→ 语法合法但无效（JS 对象中带连字符需引号，且 React 不识别该 key） - 漏掉大写首字母：
webkitborderradius→ 应为WebkitBorderRadius - 值没加引号却含单位：
fontSize: 14px→ 报错；正确写法是fontSize: '14px'或fontSize: 14（React 自动补px）
数值型单位可省略 px，但仅限支持像素的属性
React 会自动为部分 CSS 数值属性添加 px 单位，前提是该属性默认单位就是像素（如 width、height、fontSize、margin 等）。但以下情况不会自动补：
-
lineHeight: 1.5→ 合法，表示无单位倍数 -
opacity: 0.8→ 合法，无单位 -
padding: '1em'→ 必须带单位字符串，不能写padding: 1 -
transform: 'scale(1.2)'→ 必须是字符串，不能拆成数值
简单判断：只要不是纯数字比例或无单位量（如 zIndex、order），又不是预设像素属性，就老老实实用字符串。
动态样式别硬拼字符串，优先用对象组合
需要根据 props 或 state 切换样式时，不要这样写：style={`color: ${props.active ? 'blue' : 'gray'}`} —— 这是 HTML 字符串，React 会直接忽略。
正确做法是构造对象：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
const baseStyle = { fontSize: 16, padding: '8px 12px' };
const dynamicStyle = {
...baseStyle,
color: props.active ? 'blue' : 'gray',
backgroundColor: props.disabled ? '#eee' : '#fff',
};
return <button style="{dynamicStyle}">Click</button>;
注意点：
- 避免在 render 中反复创建新对象（如
style={{color: props.color}}每次都新建），可能触发不必要的重渲染；可考虑useMemo缓存 - 不要把整个对象写在 JSX 行内太深，可读性差且不利于复用，例如
style={{...styles.btn, color: props.theme === 'dark' ? 'white' : 'black'}} -
!important在内联样式中无法使用，要覆盖第三方库样式，得靠 specificity 或改用className+ CSS 规则
浏览器前缀要手动加，React 不自动处理
像 flex、transform、borderRadius 这类需要兼容老版本浏览器的属性，React 不会帮你加 -webkit- 或 -ms- 前缀。
例如圆角在 Safari 旧版中需要：
const buttonStyle = {
borderRadius: '8px',
WebkitBorderRadius: '8px', // 手动加
MozBorderRadius: '8px', // 手动加
};
更现实的做法是：现代项目基本不需要手动加前缀，交给 PostCSS 或构建工具（如 Vite/CRA 内置的 autoprefixer）处理；若真要内联，就只针对极少数必须支持的场景手动补全，且注意大小写（Webkit 首字母大写，ms 全小写）。
真正容易被忽略的是：内联样式永远无法通过 CSS 选择器继承或层叠，也无法用 @media 查询响应式断点——这些必须退回到 className + 外部 CSS 或 CSS-in-JS 方案里解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
