React JSX中设置内联样式返回[object Object]如何解决

• 属性名拼写错误：React为元素设置内联样式的合法属性为style，你的代码里写的是styles，多了末尾的s，这个属性不会被React识别为样式配置。
• 传值类型错误：React的style属性仅接受对象类型的样式配置（键名为驼峰形式的CSS属性名，键值为样式值），不接受原生HTML里的字符串格式样式。你在条件不成立时传入空字符串、成立时传入样式对象的写法，会导致类型不匹配，对象被强制转为字符串时就会出现[object Object]的结果，样式自然无法生效。

把属性名改为style，同时条件不满足的分支返回空对象（不要传空字符串）即可：

<section
  className="header__banner"
  style={scrolltop > height ? { marginBottom: `${margin}px` } : {}}
  ref={refHeaderBanner}
>

说明：你不需要手动拼接margin-bottom: 100px这类字符串格式的样式，React在渲染真实DOM时，会自动将传入的驼峰格式样式对象转换为浏览器可识别的内联样式字符串。传入空对象时，React不会为元素追加多余的内联样式，和你预期的无额外样式效果一致。

内容的提问来源于stack exchange，提问作者nntk