TextField without label in outlined variant break outline at top

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I migrated from V4 to V5 all my text field that is outlined has no border at the top. The notch is visible even if I pass label null.

Expected behavior 🤔

I want an outlined input field without label

Steps to reproduce 🕹

Steps:

1. Use a TextField
2. Set variant='outlined'
3. Pass no label or pass label={null}

Context 🔦

I want an outlined input field without label

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.06 GB / 7.66 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Managers:
    Apt: 2.0.6 - /usr/bin/apt
    pip3: 20.0.2 - /usr/bin/pip3
  Utilities:
    Make: 4.2.1 - /usr/bin/make
    GCC: 9.3.0 - /usr/bin/gcc
    Git: 2.25.1 - /usr/bin/git
    FFmpeg: 4.2.4 - /usr/bin/ffmpeg
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.12 - /usr/bin/docker
  IDEs:
    Nano: 4.8 - /usr/bin/nano
    VSCode: 1.63.2 - /snap/bin/code
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Go: 1.13.8 - /usr/bin/go
    Perl: 5.30.0 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.8.10 - /usr/bin/python3
  Databases:
    MongoDB: 3.6.8 - /usr/bin/mongo
  Browsers:
    Brave Browser: 96.1.33.106
    Chrome: 96.0.4664.110
    Chromium: 96.0.4664.110
    Firefox: 95.0

[cfecherolle]

For those who are struggling with this, here is a CSS code to fix things, based on moshfiqrony’s answer. Make sure it does not break any other part of your design, since in most cases it seems to come from Bootstrap styles, so maybe some of their intended styles will break because of this:

fieldset {
    legend {
        width: unset;
    }
}

[sumitapporio]

Try this for TextField or Select <TextField sx={{ ‘& legend’: { display: ‘none’ }, ‘& fieldset’: { top: 0 }, }} />