React With Css模块中的动态样式（非内联样式）

我正在处理一个项目。我想更改组件的css。该组件不接受内联css。所以我使用如下的全局变量。我想更改组件的backgroundSize属性。在下面的代码中，我更新了全局变量zoomLevel，然后使用this.forceUpdate重新命名组件。调试时，我看到render方法运行，zoomLevel的值更改，但我无法在视图中看到它。背景大小不变

    var zoomLevel = 40   //Global variable
         var styles = theme => ({//Outside of the class

                customGrid: {
                    backgroundSize: `${getZoomLevel()}px ${getZoomLevel()}px `,

                },
               ...

            });

    class Flowboard extends React.Component {
    ...

    ...


         componentWillMount() {


                model.addListener({

                    zoomUpdated: ze => {

                        zoomLevel = ze.zoom//changes the global variable
                        this.forceUpdate()
                        console.log(getZoomLevel())

                    },
                })

            }

render(){
return(
 <DiagramWidget 
                            deleteKeys={!this.props.keysLocked ? [46, 8] : []} 
                            allowCanvasZoom={!this.props.keysLocked || this.props.searchMode}
                            inverseZoom={true}                    
                            allowLooseLinks="false" 
                            maxNumberPointsPerLink="0" 
                            className={`srd-demo-canvas ${classes.customGrid}`}//I expect that the style should be changed
                            diagramEngine={this.state.engine} 
                           // baseClass={classes.customGrid}
                        />
     )
  }
}

var zoomLevel=40//全局变量
var styles=theme=>（{//在类之外
自定义网格：{
背景大小：`${getZoomLevel（）}px${getZoomLevel（）}px`，
},
...
});
类流程板扩展了React.Component{
...
...
组件willmount（）{
model.addListener({
ZoomUpdate:ze=>{
zoomLevel=ze.zoom//更改全局变量
这个.forceUpdate（）文件
console.log（getZoomLevel（））
},
})
}
render（）{
返回(
)
}
}

---

我这里怎么了？有什么建议吗？谢谢

“该组件不接受内联css。”当然可以！只需通过道具传递所需内容，并将其内联应用到DiagramWidget的JSX中。@jmargolisvt我使用类似于内联css的样式={{backgroundSize:“150px”}。但它不起作用。你把它作为道具应用到DiagramWidget上吗？因为那样不行。如果您将它添加到JSX元素中，它就会工作。你们很多人都想分享一下你们在应用内联样式方面的尝试，因为它似乎可以很容易地解决你们的问题。当然，我会像下面这样为元素提供支持：

好的，但之后你们会如何处理它呢？如果您在孩子的JSX中正确使用道具，这可能会起作用。看起来您已经完成了一半。“组件不接受内联css。”当然可以！只需通过道具传递所需内容，并将其内联应用到DiagramWidget的JSX中。@jmargolisvt我使用类似于内联css的样式={{backgroundSize:“150px”}。但它不起作用。你把它作为道具应用到DiagramWidget上吗？因为那样不行。如果您将它添加到JSX元素中，它就会工作。你们很多人都想分享一下你们在应用内联样式方面的尝试，因为它似乎可以很容易地解决你们的问题。当然，我会像下面这样为元素提供支持：

好的，但之后你们会如何处理它呢？如果您在孩子的JSX中正确使用道具，这可能会起作用。看来你已经走到一半了。