Override Material UI MuiInput

Question

I am trying to override Material UI's input so my text field has a box around it instead of a line. I followed Material's example for a button which worked. I'm not sure what I need to do differently to override a text field. Thanks in advance.

MyTheme.js

import { createMuiTheme } from 'material-ui/styles';
import Input from 'material-ui/Input';

export default createMuiTheme({
overrides: {
        MuiInput: {
            Root: {
                borderRadius: 0,
                backgroundColor: "#fff",
                border: '1px solid pink',
                fontSize: 16,
                padding: '10px 12px',
                width: 'calc(100% - 24px)',
            },
        }
    } 
});

App.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyTheme from './MyTheme';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';


class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <MuiThemeProvider theme={MyTheme}>
         <form noValidate autoComplete="off">
           <TextField
              label="Name"
              margin="normal"
             />
         </form>
      </MuiThemeProvider>
      );
   }
}

App.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default App;

Answer 1

The overrides class syntax is case sensitive. Root is not suppused to be spelled capitalized. The following works for me:

import { createMuiTheme } from 'material-ui/styles';
import Input from 'material-ui/Input';

export default createMuiTheme({
overrides: {
        MuiInput: {
            root: {
                borderRadius: 0,
                backgroundColor: "#fff",
                border: '1px solid pink',
                fontSize: 16,
                padding: '10px 12px',
                width: 'calc(100% - 24px)',
            },
        }
    } 
});

You can actually see that in the DevTools. If you inspect a textfld component, it will have the class MuiInput-root, not MuiInput-Root.

Hope this helps.