带有道具值和条件检查的组件的React inline styling不工作。

Question

我想在日历中设置一个预约视图。每个预约都可以有一个特定的颜色。我试图检查该颜色，并使顶部边框代表该颜色。到目前为止，它还没有显示出来。有人看到了什么不对劲的地方吗？

jsx代码。

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

Scss类也属于一个任命。

.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;

}

Answer 1

简单的排版错误，你使用的是 borderColorTop 而不是 borderTopColor 风格道具