给React自定义组件传递Inline Styling不生效的问题咨询

问题根因 #

你给自定义<Window>组件传递的style属于自定义属性，React不会自动将该属性绑定到组件内部的根DOM元素上。你直接把样式写在Window组件内部时，是直接关联到了真实渲染的div标签，所以可以生效，而父组件传入的style没有被组件消费，自然不会起作用。

修复方案 #

修改Window组件的代码，接收父组件传入的style属性，合并到根元素的样式配置中即可：

import React from "react";
import "./Window.css";

class Window extends React.Component {
  render() {
    return (
      <div
        className="square"
        // 展开运算符合并默认样式和父传的自定义样式，父传样式优先级更高，可覆盖默认配置
        style={{
          // 这里可以保留你原本的默认样式，没有默认样式可以直接写style={this.props.style}
          position: "relative",
          left: "0",
          ...this.props.style
        }}
      >
        {this.props.number}
      </div>
    );
  }
}

export default Window;

修改完成后，你在App组件中给不同Window组件传入的不同style就会正常生效，实现每个组件单独调整位置的需求。

注意事项 #

如果修改后仍然不生效，可检查Window.css中.square类的样式规则，是否存在带!important标记的定位相关属性（比如position、left、top等），避免优先级冲突。

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