无法从“React JS”中的“reactstrap”增加 Modal 的宽度

Question

export class A extends Component {
    constructor(props) {
        super(props)

        this.state = {
            collapse: false,

            divWidth: {
                width: 700,
            }

        }
        this.toggle = this.toggle.bind(this);


    }
    toggle() {
        this.setState(state => ({ collapse: !state.collapse }));
    }

    render() {
        const data = [{
            name: 'Ayaan',
            age: 26
        }, {
            name: 'Ahana',
            age: 22
        }]
        const columns = [{
            Header: 'Name',
            accessor: 'name'
        }, {
            Header: 'Age',
            accessor: 'age'
        }]

        return (
            <div>
                <Button onClick={this.toggle} >
                    Click Button
                 </Button>
                <Modal isOpen={this.state.collapse} modalClassName={this.state.divWidth}>
                    <ModalHeader>Welcome</ModalHeader>
                    <ModalBody>
                        <div className="form-group">
                            <div>
                                <ReactTable
                                    data={data}
                                    columns={columns}
                                    defaultPageSize={2}
                                />
                            </div>
                      </div>
                    </ModalBody>
                </Modal>
            </div>
        )

    }
}

在上面的代码中，我无法增加模态的宽度（来自 reactstrap），我们只能将宽度增加到 500px。我在名为 divWidth 的状态中添加了 css 属性，我将宽度增加到 700 但它仍然不起作用。

Answer 1

在组件集size="lg"或您需要的东西上，它可以工作。

或者您可以像这样设置内联样式：

<Modal size="lg" style={{maxWidth: '700px', width: '100%'}}> ... </Modal>

文档reactstrap真的很难解释。