创建的节点不渲染背景色

Question

我正在尝试实现 Clement 的 Path Finding Visualizer 教程。我是新来的反应。开始和结束节点的颜色没有被渲染。

请看我的档案：

PathVisualizer.css :

.grid{
    margin: 500px 500 500;
    margin-top: 100px;
}

PathVisualizer.jsx :

import React, {Component} from "react";
import Node from './Node/Node';
import './Node/Node.css'

import './PathfindingVisualizer.css';


export default class PathfindingVisualizer extends Component{
    constructor(props){
        super(props);
        this.state={
        nodes: [],
        };
    }
    componentDidMount() {
        const nodes=[];
       
        for(let row=0; row<20; row++){
            const currentRow=[];
            for(let col=0; col<50; col++){
                const currentNode={
                    col,
                    row,
                    isStart : row === 10 && col === 5,
                    isFinish : row === 10 && col === 45 ,
                };
                
                currentRow.push(currentNode);
            }
            nodes.push(currentRow);
        }
        this.setState({nodes});
    }
    render(){
        const {nodes}=this.state;
        console.log(nodes);

        return(
            <div className="grid">
                {nodes.map((row,rowIdx)=>{
                    return(
                        <div key={rowIdx}>
                            {row.map((node,nodeIdx) => {
                            const {isStart, isFinish} = node;
                            return(
                                
                                <Node>
                                    key={nodeIdx}
                                    isStart={isStart}
                                    isFinish={isFinish}
                                    test={'foo'}
                                    test={'kappa'}
                                </Node>
                            );
                        })}
                        </div>
                    );
                    })}
                
            </div>
        );
    }
}

节点.css：

.node {
    width: 25px;
    height: 25px;
    grid-gap: 20px;
    outline: 1px solid rgb(94, 93, 93);
    display: inline-block;
  }

.node-finish {

  background-color: rgba(181, 6, 6, 0.751) !important;
}

.node-start {
  background-color: rgb(4, 178, 4)!important;
}

节点.jsx：

import React, {Component} from "react";

import './Node.css';

export default class Node extends Component{
    constructor(props){
        super(props);
        this.state={}
    }

    render(){
        const {isFinish, isStart} = this.props
        const extraClassName = isFinish 
        ? 'node-finish'
        : isStart ? 'node-start'
        : '';
        return <div className ={`node ${extraClassName}`}></div>
        
    }

}

export const DEFAULT_NODE={
    row:0,
    col:0,
}; 

这些是我的文件。我正在正确渲染网格的输出。但是特定提到的节点的节点颜色没有改变。请帮助我。

谢谢。