Question

我正在React JS写dialog个组件。我想让它更大。我想，使用网格可能是可能的。不幸的是事实并非如此。我在bootstrap中记得如何通过lg-class，如何在office365 dialog中解决这个问题？我的组成部分：

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

添加包含

的CSS规则应该足够了

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

但请记住，不要在对话框中添加太多信息和/或选项，并且containerClassName属性在文档中标记为已弃用。

如何自定义对话框宽度？

1 个答案: