覆盖材质 UI MuiInput

Question

我正在尝试覆盖 Material UI 的输入，因此我的文本字段周围有一个框而不是一条线。我按照 Material 的示例找到了一个有效的按钮。我不确定我需要做些什么来覆盖文本字段。提前致谢。

我的主题.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)',
            },
        }
    } 
});

应用程序.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

覆盖类语法区分大小写。Root 不应该被拼写成大写。以下对我有用：

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 组件，它将具有类 MuiInput-root，而不是 MuiInput-Root。

希望这可以帮助。