Input styled with inputClasses.multiline does not work

[genepaul]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When trying to use inputClasses.multiline to style an input's root element, it does not appear to be applying those styles at all.

The following code does not appear to change the height or border of the input when multiline=true:

const StyledInput = styled(Input)({
  borderRadius: 4,
  border: "1px solid blue",
  padding: 4,
  height: "34px",

  [`&.${inputClasses.multiline}`]: {
    height: "auto",
    border: "1px solid red"
  }
});

Expected behavior 🤔

inputClasses.multiline should apply to the component when multiline=true.

Steps to reproduce 🕹

https://codesandbox.io/s/upbeat-hertz-0p994?file=/src/App.js:101-364

This demonstrates the issue. If you add the following to the styles it overrides properly:

"&.MuiInputBase-multiline": {
    height: "auto",
    border: "1px solid red"
  }

Context 🔦

I am trying to create a custom styled input, but we have a specific height the base input needs to be. I need to override that height to auto if the input is multiline.

Your environment 🌎

`npx @mui/envinfo`

Browser used: Chrome 98

  System:
    OS: macOS 11.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 70.59 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
    npm: 7.24.2 - ~/Developer/component-library/node_modules/.bin/npm
  Managers:
    Homebrew: 3.3.7 - /usr/local/bin/brew
    pip3: 21.3.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.34.1 - /usr/local/bin/git
    Clang: 13.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.48 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.8 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.62.0 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.13 - /usr/bin/javac
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.29 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.9.9 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 98.0.4758.80
    Edge: 98.0.1108.51
    Firefox: 95.0.1
    Safari: 15.1

[mnajdova]

This is a bug, thanks for the report. Until it is fixed, you can use the inputBaseClasses instead, see https://codesandbox.io/s/reverent-bhabha-t2t9xf?file=/src/App.js I am creating a fix for the issue.

[genepaul]

@mnajdova - thank you for the response!