反应组件的内联样式与道具值和条件检查不起作用

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

反应组件的内联样式与道具值和条件检查不起作用

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

css

inline

styling

jsx

reactjs