Css 使用道具值和条件检查对组件的内联样式进行反应不起作用

我正在尝试在日历中设置约会视图的样式。每一个预约都可能有特定的颜色。我试图检查该颜色，并制作上边框，使其代表该颜色。到目前为止还没有出现。有人看到不是赖特的东西吗

jsx代码：

 <div className={props.start >= moment() ? "appointment" : " appointment disabled"} style={props.color !== null ? {borderColorTop: props.color} :{borderColorTop: '#000'}}> 
 </div>

---

简单的打字错误，你在你的风格道具中使用的是borderColorTop而不是borderTopColor

哦，上帝！打字错误是我最近最大的敌人，我总是忽略它！谢谢你的注意

.appointment{
    width:105%;
    height:95%;
    background-color:$plain-white;
    margin-top:3% !important;
    margin-left:3%;
    border: 4px solid $plain-white;
    border-radius: 5px;
    padding:5px; 
    -webkit-box-shadow: 1px 5px 23px -2px rgba(199, 199, 199, 1);
    -moz-box-shadow: 1px 5px 23px -2px rgba(199, 199, 199, 1);
    box-shadow: 1px 5px 23px -2px rgba(199, 199, 199, 1);

    .service{
        text-align: center;
        font-weight: 700;
    }

}
.enable{
    cursor: pointer;
    border-top-color:#9DBBF5;
}
.disabled{
    pointer-events: none;
    border-color: $white;
    border-top-color: $black;
    background-color: $white;

}