React inline styling of component with props value and condition check not working

Question

I'm trying to style an appointment view in a calendar. Every made appointment could have a specific color to it. I tried to check for that color and make the top border so that it represents that color. So far it isn't showing. Does anyone see something that isn't wright?

jsx code:

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

scss classes that also belong to an appointment:

.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

Simple typo, you're using borderColorTop instead of borderTopColor in your style prop