如何自定義對話框寬度？

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

這應該足以補充含

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

一個CSS規則，但切記不要把太多的信息和/或選擇進入對話框，該containerClassName財產在文檔中標記爲已棄用。