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属性也可以。有可能吗？

Answer 1

找到了解决方案。经过反复试验之后，我的问题的解决方案是使用CSS选择器的另一种方法。

这可以解决问题：

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

Answer 2

我猜可能的一种方法是使用CSS选择器。您可以检查dom树并了解确切的路径。例如

#PicModal > div > p:nth-child(2) {
  overflow: hidden;
}

覆盖或删除React组件的样式

2 个答案: