javascript - 覆盖或删除 React 组件的样式

Question

目前正在与 React 作斗争。 我有一个组件 Model.Dialog这是一个我不能直接修改它的依赖项。

Modal.Dialog CSS 是:

.Modal {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    margin: 0;
    background: #fff;
    border-radius: 0;
    flex-direction: column;
    display: flex
}

调用组件的render方法是:

render() {

    return (
        <Modal.Dialog
            id="PicModal"
            isOpen={this.props.isOpen}
            onClose={this._handleClose}
            modifier={'large'}
            ariaHideApp={false}
        >
            <Modal.Body className={Styles.PicModal}>
                <Button
                    className={Styles.closeBtn}
                    modifier="styleless"
                    onClick={this._handleClose}
                    dataTest="pic-close"
                >
                    <IconCross height="24" />
                </Button>
                <div id="picContainer" data-test="pic-container" />
            </Modal.Body>
        </Modal.Dialog>
    );
}

我需要更改 overflow: auto至 overflow: revert ，我已经尝试了几种方法，例如:

• 正在添加 <Modal.Dialog style={{overflow:"revert"}} ... </Modal.Dialog>
• 创建具有所有属性的自定义 CSS，更改 overflow至 revert并插入 <Modal.Dialog className=CSSTEST ... </Modal.Dialog>
• 添加一个 IdSelector #PicModal { overflow: revert; }

但是这些都不起作用...有什么建议吗？

编辑:删除 overflow属性(property)也会起作用。有可能吗？

Answer 1

找到解决方案。在反复试验之后，我的问题的解决方案是采用不同的 CSS 选择器方法。

这成功了:

div[id="PicModal"] {
    overflow: revert;
}