当属性值更新时，React子组件css停止工作

Question

我正在使用ReactJS构建一个Web应用程序，该应用程序允许用户更改背景图像。我有一个主要的父组件，该组件的背景图像具有默认值。我还有另外两个子组件。 组件1：背景是动态的一个组件。 组件2：一个菜单组件，用户可以选择其他图像。

组件1 CSS：

const dynamicStyles = {
      mainContent: {
        background: `url(${this.props.backgroundImage}) no-repeat center center fixed`,
        backgroundSize: "cover"
      }
}

当用户使用Child 2组件更改背景图像时，父组件的状态将更新。因此，Child 1组件的背景会更新。

但是CSS样式（backgroundSize：“ cover”）停止工作。如何更改图像，但仍将CSS应用于此动态属性？