Is it possible to adjust width on date picker control in React office UI fabric

Question

Having issues using the DatePicker control and fixing width for my SPFX app. The default width is 100%. I want it to be the same width as my text input, which I pass in a 700px width property into the styles parameter. There is no width or styles parameter I can pass in a prop to on the DatePicker component.

            <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 }
                    
        />

Answer 1

Try this:

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

Tested on Fluent 8.49.1.

I suppose that your original code was missing the root key.

Citing docs:

styles prop

A component consists of DOM elements, or "areas." Each of the areas should be targetable for styling.

To find the available areas for a component, use intellisense or look at the IComponentStyles interface in the component's Component.types.ts file (substituting the actual component name for "Component").

Further reading - https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots.