在 react js Fluent-ui Northstar 中增加日期选择器的大小答案

【问题标题】：Increase the size of a datepicker in react js Fluent-ui Northstar在 react js Fluent-ui Northstar 中增加日期选择器的大小
【发布时间】：2021-11-26 06:03:03
【问题描述】：

如何在 Fluent-ui Northstar 中将宽度设置为 100%？宽度设置为 100% 但不显示

const getMatterTypeField = () => {

    return formFieldsMatterDueDate({

      label: "Due Date",

      id: "dueDate",

      key: "dueDate",

      name: "dueDate",

      className: "half-width-left matterDate",

      classNameControl: "createform",

      type: Datepicker,

      required: true,
      fluid: true,
      placeholder: "Select DueDate",

      styles: {width:"100%"},

      defaultSelectedDate:new Date(moment(getMattervalue.dueDate)),

      minDate: new Date(moment(getMattervalue.startDate)),

      defaultValue: moment(getMattervalue.dueDate),

      onDateChangeFn: (name, value) => setMatterInfo("dueDate", value),
      
    
    });
  };

返回;

日期选择器的宽度与表单中其他字段的文本框不同

【问题讨论】：

您能否尝试在您的宽度属性中添加 !important 后缀，如下所示：width: 100% !important;

标签： css reactjs datepicker microsoft-teams fluent

【解决方案1】：

也许您还需要将日期选择器的父 div 设置为 100% 或任何您需要的宽度以实现该增加。可能你将不得不覆盖一些 css 样式

【讨论】：

已将 div 宽度设置为 100%
@Viz - 您能否确认您的问题是否已通过上述建议解决或仍在寻求帮助？
仍在尝试解决
@Viz - 请您使用浏览器中的开发工具检查 UI 并检查您的 CSS 是否覆盖或检查您的父宽度。
@Viz - 您能否确认您的问题是否已通过上述建议解决或仍在寻求帮助？