[DateRangePicker] Styling due to a wrapper div

[samfromaway]

Order ID 💳

30137

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Porbably unnecesary but unstyleable div wrapping the date range picker

The problem in depth 🔍

I want to add 100% width to the TextField but it is restricted when I add fullWidth by the surrounding div with the className css-17vdz66

I now have to style it globally in the main CSS file and the className .css-17vdz66 . Is there an option to style it directly with a prop from the component itself? Thanks for the help

Context 🔦

Can't style the component the way I like.

Your environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 12.19.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Edge: Not Found
    Firefox: 89.0
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @types/react: ^17.0.3 => 17.0.18 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: ^5.2.1 => 5.3.0 
    typescript: ^4.2.4 => 4.3.5 

[KOliver94]

If I'm correct, these parts causes the problem but I cannot see any easy way to override the style provided.

https://github.com/mui-org/material-ui/blob/24015d1e4bdf135ba6c6091141cab2299d824be5/packages/mui-lab/src/DateRangePicker/DateRangePickerInput.tsx#L15-L22 https://github.com/mui-org/material-ui/blob/24015d1e4bdf135ba6c6091141cab2299d824be5/packages/mui-lab/src/DateRangePicker/DateRangePickerInput.tsx#L170-L174

Does anyone managed to find a workaround? Or will this be changed in the community version anytime soon?

Update: I also used CSS to override this with width: 100% but I guess there is another problem with the following line beacuse in normal circumstances I would never be true and change direction. https://github.com/mui-org/material-ui/blob/24015d1e4bdf135ba6c6091141cab2299d824be5/packages/mui-lab/src/DateRangePicker/DateRangePickerInput.tsx#L18

[LukasTy]

@samfromaway Do I understand your use case correctly? Do you need to make the DateRangePicker take the full width of the container? Would maybe simply adding fullWidth to the TextField components achieve your desired result?

Here is an example codesandbox.

[LukasTy]

Fixed with #6096