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

我正在

React JS

中编写组件。我想把它弄大一点。我想，使用网格是可能的。不幸的是，情况并非如此。我记得在bootstrap中我通过了lg课程，如何在office365对话框中解决这个问题？ 我的组成部分：

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>
        );
    }

}

导出默认类日历对话框扩展组件{
静态defaultProps={
允许输入：false，
formatDate：（日期）=>{
若有（日期）{
返回日期。toDateString（）；
}
返回“”；
},
星期一：星期一，星期天，
isRequired:错误，
IsMonthPickService:是的，
字符串：默认的_字符串，
无边界：错误，
Pickeraria标签：“日历”，
};
建造师（道具）{
超级（）；
设{formattate，value}=props；
此.state={
selectedDate:值| |新日期（），
};
}
_onSelectDate=（日期）=>{
console.log（'state'，this.state）；
这是我的国家({
所选日期：日期，
});
}
_日历=（）=>{
这个._dismissdatepickerpoup（）；
}
render（）{
让{
显示
一次
}=这是道具；
常数{
星期一，
串，
}=这是道具；
返回(
);
}
}

添加包含

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

---

但请记住，不要在对话框中输入太多信息和/或选项，文档中将

containerClassName

属性标记为已弃用。

不，我使用的是office365结构