是否可以在 React office UI 结构中调整日期选择器控件的宽度

【问题标题】：Is it possible to adjust width on date picker control in React office UI fabric是否可以在 React office UI 结构中调整日期选择器控件的宽度
【发布时间】：2021-12-17 21:51:40
【问题描述】：

在我的 SPFX 应用程序中使用 DatePicker 控件和修复宽度时遇到问题。默认宽度为 100%。我希望它与我的文本输入具有相同的宽度，我将 700px 宽度属性传递给 styles 参数。在 DatePicker 组件上，我没有可以传递 prop 的宽度或样式参数。

            <DatePicker label="Due Date"
                    value={this.state.Due_x0020_Date? new Date(): null}
                    onSelectDate = {(date: Date | null | undefined): void => {
                        this.state.Due_x0020_Date=date;  }}
                    disabled={this.state.mode === 'edit' ? true : false }
                    
        />

【问题讨论】：

标签： spfx office-ui-fabric fluent-ui fluentui-react office-ui-fabric-react

【解决方案1】：

试试这个：

<DatePicker styles={{ root: {width: 700} }} />

在 Fluent 8.49.1 上测试。

我想您的原始代码缺少root 键。

引用文档：

样式道具

组件由 DOM 元素或“区域”组成。每个区域都应该是可定位的样式。

要查找组件的可用区域，请使用智能感知或查看组件的 Component.types.ts 文件中的 IComponentStyles 接口（将“组件”替换为实际组件名称）。

进一步阅读 - https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots.

【讨论】：