如何自定义对话框的宽度？

Question

I'm writing dialog component in React JS . I want to make it larger. I thought, that it could be possible with using of grid. unfortunately it isn't so. How I remember in bootstrap I passed lg-class, how this issue can be solved in office365 dialog ? My component:

export default class CalendarDialog extends Component {

    static defaultProps = {
        allowTextInput: false,
        formatDate: (date) => {
            if (date) {
                return date.toDateString();
            }

            return '';
        },
        firstDayOfWeek: DayOfWeek.Sunday,
        isRequired: false,
        isMonthPickerVisible: true,
        strings: DEFAULT_STRINGS,
        borderless: false,
        pickerAriaLabel: 'Calender',
    };

    constructor(props) {
        super();

        let { formatDate, value } = props;

        this.state = {
            selectedDate: value || new Date(),
        };
    }

    _onSelectDate = (date) => {
        console.log('state', this.state);

        this.setState({
            selectedDate: date,
        });
    }

    _calendarDismissed = () => {
        this._dismissDatePickerPopup();
    }


    render(){

        let {
            show,
            onClose
        } = this.props;

        const {
            firstDayOfWeek,
            strings,
        } = this.props;

        return (
            <div className="ms-Grid">
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-sm6">
                        <Dialog
                            isOpen={ show }
                            type={ DialogType.normal }
                            onDismiss={ onClose }
                            title='Version'
                            subText=''
                            isBlocking={ false }
                            containerClassName='ms-dialogMainOverride'
                        >

                            <VersionList/>
                            <DialogFooter>
                                <DefaultButton onClick={ onClose } text='Hey' />
                                <PrimaryButton onClick={ onClose } text='Save' />
                                <DefaultButton onClick={ onClose } text='Close' />
                            </DialogFooter>
                        </Dialog>
                    </div>
                </div>
            </div>
        );
    }

}

Answer 1

It should be enough to add a CSS rule containing

.ms-dialogMainOverride {
  max-width: 600px;
}

But keep in mind not to put too much information and/or choices into the dialog and that the containerClassName property is marked in documentation as deprecated.