[TextField] legend style conflicts with Bootstrap when no label is set

[trombipeti]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

<TextField size={"small"} variant="outlined" placeholder="No label" />

Expected behavior 🤔

Steps to reproduce 🕹

Steps:

1. Add bootstrap to the project
2. Create an "outlined" TextField with no label
3. See sandbox below: simple react-ts project with @mui/material-5.10.5 and bootstrap-5.2.1

https://codesandbox.io/s/peaceful-mayer-rhzhle?file=/src/App.tsx

Context 🔦

I have bootstrap throughout my application, and I also want to have MUI TextFields, sometimes without a label.

I think this bug has been issued in #19463, but looking at the PRs, I think the fix isn't complete and simply ignores the case when no label is set.

Manually adding width: auto; to the legend fixes the layout.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD    
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.33)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.96
    @mui/core-downloads-tracker:  5.10.4
    @mui/icons-material: ^5.8.4 => 5.10.3
    @mui/lab: ^5.0.0-alpha.77 => 5.0.0-alpha.98
    @mui/material: ^5.6.1 => 5.10.4
    @mui/private-theming:  5.10.3
    @mui/styled-engine:  5.10.4
    @mui/system:  5.10.4
    @mui/types:  7.2.0
    @mui/utils:  5.10.3
    @types/react: ^17.0.9 => 17.0.43
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.3.2 => 4.6.3

Tested on Firefox 102.0esr and Chrome 105.

[ZeeshanTamboli]

I created a PR for it - #34343

[trombipeti]

I can confirm that the issue has been fixed, thanks!