React解构Props的内联样式不生效？如何修复？

你的代码里内联样式的语法存在错误，导致样式无法正确应用。具体来说，style对象中每个属性的值被额外的大括号包裹了，这会导致传递给CSS属性的是一个对象而非预期的字符串/数值。

解决方案 #

• 移除style对象中每个属性值外层的大括号，直接引用解构后的变量
• 给index（对应zIndex）设置默认值，避免未传参时出现undefined
• 修正组件名拼写错误（Cirlce → Circle），避免后续使用混淆

修正后的JSX代码 #

const Circle = ({
  color = 'red',
  bottom = 'unset',
  right = 'unset',
  left = 'unset',
  top = 'unset',
  index = 0,
  children
}) => {
  return ( 
    <div 
      className="circle" 
      style={{
        backgroundColor: color, 
        bottom: bottom, 
        left: left, 
        right: right, 
        top: top, 
        zIndex: index
      }}
    >
      {children}
    </div>
  );
}

说明 #

• 在JSX的style属性中，外层的{}已经代表进入JavaScript上下文，所以直接引用变量即可，不需要再用{}包裹变量。原写法中backgroundColor: {color}等价于backgroundColor: { color: color }，这不符合CSS属性值的要求，浏览器无法识别。
• 给index设置默认值0，可以避免当组件未传入index参数时，zIndex变成undefined导致样式异常。
• 组件名拼写修正为Circle，符合命名规范，也避免使用时出现找不到组件的问题。

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