Css для div в теге TransformComponent

Question

У меня есть div с сеткой имени класса в теге TransformComponent. Я пытаюсь применить css к сетке через внешний css, используя его как .grid {}. Но css не применяется к нему ..grid - это css, который я запрашиваю для div, названного grid в теге transormcomponent. Ниже приведен код файла .jsx, за которым следует содержимое s css. Помощь будет оценена. Спасибо

<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");
            }