我有组件，其中有div元素。我希望能够禁用/启用该div元素的边框颜色的基础上点击该div元素。
想法是有一个方法，将返回什么样的边框颜色应该画在div上，然后如果颜色是'绿色'，然后设置该div的pointerEvent为'auto'，如果它不是'绿色'，设置pointerEvent为'none'。但是，我得到奇怪的语法错误，当我试图这样做，我不知道为什么会发生，我认为代码是好的，但是Typescript中的一些其他配置可能是错误的。我得到的错误如下所示
[ts]类型"{指针事件：字符串;显示：字符串;边框：字符串;高度：字符串;宽度：字符串;左边距：字符串;}"不可分配给类型" CSSProperties "。属性" pointerEvents "的类型不兼容。类型" string "不可分配给类型" PointerEventsProperty "。[2322]
我尝试将属性设置为一个值"none"或"auto"，这很好，但当我放入条件语句时，它不起作用。我尝试将样式设置为CSSProperties类型，但随后出现如下错误：
[ts] Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "all" | "auto" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke" | Observable<...>'. [2322]

• • 样式定义：**

const divContainerDetailsStyle ={
                pointerEvents: `${this.whatColorToDraw('container') == 'green' ? 'auto' as PointerEventsProperty : 'none' as PointerEventsProperty }`,
                display: 'inline-block',
                border: `${this.whatColorToDraw('container') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('container')}`,
                height: '20%',
                width: '100%',
                marginLeft: '10px' 
            }

• • 呼唤那种风格**

return (
                <div style={{ height: '100%', width: '100%' }}>                    
                    <div style={{ height: '100%', width: '70%', marginLeft: '30%', padding: '10px' }}>
                        <div className="row" style={divContainerDetailsStyle}>
                            <ContainerDetails container={this.state.selectedContainer != undefined ? this.state.selectedContainer : emptyContainer} containerChangeHandler={this.onContainerChangeHandler} menuItemsNames ={menuItemsNames}></ContainerDetails>
                        </div>
                        <div className="row" style={{ display: 'inline-block', border: `${this.whatColorToDraw('device') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('device')}`, height: '80%', width: '100%', marginTop: '5px', marginLeft: '10px' }}>
                            <DeviceDetails selectedDevice={this.state.selectedDevice != undefined ? this.state.selectedDevice : emptyDevice} />
                        </div>
                    </div>
                </div>
            )

• • 绘制方法的颜色**

whatColorToDraw(componentName) {
                switch (this.state.deviceSelected) {
                    case true && componentName == 'container':
                        return 'gray';
                    case false && componentName == 'container':
                        return 'green';
                    case true && componentName == 'device':
                        return 'green';
                    case false && componentName == 'device':
                        return 'gray';
                    default:
                        return 'black';
                }

预期结果是pointerEvents设置为none，这意味着当whatcolorToDraw方法返回绿色以外的颜色时，将禁用单击div。当whatcolorToDraw方法返回"green"时，pointerEvent应设置为"auto"。
实际结果为上述语法错误，无法编译。