覆盖材料UI MUIINPUT

Question

我正在尝试覆盖材料UI的输入，以便我的文本字段在其周围有一个框而不是线路。我遵循了材料的示例，以获取有效的按钮。我不确定我需要做些什么来覆盖文本字段。预先感谢。

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

覆盖类语法对案例敏感。根本不认为拼写为大写。以下对我有用：

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)',
            },
        }
    } 
});

您实际上可以在DevTools中看到它。如果您检查textfld组件，它将具有uiinput-root类，而不是muiinput-root。

希望这会有所帮助。