Question

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

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

覆盖类语法区分大小写。 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。

希望这有帮助。

覆盖材质UI MuiInput

1 个答案: