Html 标记组件中div的Css

我在TransformComponent标记中有一个类名为grid的div。我试图通过外部css将css作为.grid{}访问它，从而将其应用到grid。但是css没有应用到它。grid是我在transormcomponent标记中为grid的div应用的css 下面是.jsx文件的代码，后面是scss内容。 谢谢你的帮助

<div className="zoom">
                        <TransformWrapper
                        defaultScale={1}
                        defaultPositionX={200}
                        defaultPositionY={100}
                        >
                        {({ zoomIn, zoomOut, resetTransform, positionX, positionY, ...rest }) => (
                        <React.Fragment>
                        <div className="tools">

                        <button onClick={zoomIn}>+</button>
                        <button onClick={zoomOut}>-</button>
                        <button onClick={resetTransform}>x</button>
                        </div>

                        <TransformComponent >

                        <div className="grid">
                             <input 
                            type="file"
                            className="file"
                            id="file-browser-input"
                            name="file-browser-input"
                            ref ={input=>this.fileInput=input}
                            onDragOver={(e)=>{
                            e.preventDefault();
                            e.stopPropagation();
                            }


                            }
                        onDrop={this.onFileLoad.bind(this)}
                        onChange={this.onFileLoad.bind(this)}
                        onMouseDown={this.catchItem.bind(this)}
                        //onMouseMove={this.mousemove.bind(this)}
                        //onMouseUp={this.mouseup.bind(this)}

                         />
                        <div 
                        className="files-preview-container" 

                        onMouseDown={this.catchItem.bind(this)}>
                        {loadedFiles.map((file,idx) => {
                            return <div
                                className="file"
                                key={idx}
                                >
                                <img src = {file.data}/>


                            </div>
                        })}
                        </div>


                        </div>
          </TransformComponent>

        </React.Fragment>
      )}
    </TransformWrapper>








  </div>


  .zoom{
        padding: 0px;
        position: absolute;
        left:15%;
        right:15%;
        height: 93%;
        background-color: palevioletred;

        //background: url("grid.svg");  

            .grid{
            position: absolute;
            height: 100%;
            width: 100%;
            top:30px;
            left: 0px;
            right: 0px;
            background-color: black;

            background: url("grid.svg");
            }

{（{zoomIn，zoomOut，resetTransform，positionX，positionY，…rest}）=>(
+
-
x
this.fileInput=input}
onDragOver={（e）=>{
e、 预防默认值（）；
e、 停止传播（）；
}
}
onDrop={this.onFileLoad.bind（this）}
onChange={this.onFileLoad.bind（this）}
onMouseDown={this.catchItem.bind（this）}
//onMouseMove={this.mousemove.bind（this）}
//onMouseUp={this.mouseup.bind（this）}
/>
{loadedFiles.map（（文件，idx）=>{
返回
})}
)}
.zoom{
填充：0px；
位置：绝对位置；
左：15%；
右：15%；
身高：93%；
背景色：淡紫色；
//背景：url（“grid.svg”）；
.电网{
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：30px；
左：0px；
右：0px；
背景色：黑色；
背景：url（“grid.svg”）；
}

您是否也可以放置您正在应用的css。是的。检查编辑的代码您是否尝试检查元素？查看元素中是否存在类道具。您是否使用简单的css或sass模块？我使用的是.scss扩展。这看起来像是一个范围问题，您可以粘贴完整的css文件和完整的jsx吗？