如何重写Material UI的MuiInput组件，为文本框添加边框而非下划线？

嘿，我刚帮你捋了下这个问题，其实和按钮重写的核心思路一致，但Input组件的样式结构更复杂一点，还有个小细节你可能没注意到——类名的大小写！

首先，你代码里的第一个小问题 #

你写的Root应该改成小写开头的root，Material UI的组件样式键都是驼峰小写开头的（比如按钮的root），这是导致样式不生效的第一个原因。

然后，要覆盖Input默认的下划线样式 #

Material UI的Input默认是用伪元素::before和::after来实现下划线的，所以我们需要把这些伪元素的边框去掉，同时给根容器加上边框，还要处理聚焦、hover等状态下的样式，不然会和默认样式冲突。

完整的MyTheme.js代码示例 #

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

export default createMuiTheme({
  overrides: {
    MuiInput: {
      // 根容器样式
      root: {
        borderRadius: 0,
        backgroundColor: "#fff",
        border: '1px solid pink',
        fontSize: 16,
        padding: '10px 12px', // 补全你没写完的padding
        // 去掉默认的下划线伪元素
        '&::before': {
          borderBottom: 'none',
        },
        '&::after': {
          borderBottom: 'none',
        },
        // hover状态下的样式
        '&:hover:not($disabled):not($focused):not($error)': {
          borderColor: '#ff88aa', // 自定义hover时的边框色
        },
        // 聚焦状态
        focused: {
          borderColor: '#ff4488', // 自定义聚焦时的边框色
        },
        // 错误状态
        error: {
          borderColor: '#ff0000',
        },
        // 禁用状态
        disabled: {
          borderColor: '#eee',
          backgroundColor: '#f5f5f5',
        }
      },
    },
  },
});

为什么按钮重写成功但Input不行？ #

按钮的样式结构相对简单，只需要覆盖root类就能改变外观，但Input默认依赖伪元素实现下划线，而且有多个状态类（focused、error等）需要处理，不然默认的下划线会和你加的边框同时显示，看起来很奇怪。

最后，别忘了在应用中注入主题 #

确保你在App的顶层用MuiThemeProvider包裹组件，就像你重写按钮时那样：

import { MuiThemeProvider } from 'material-ui/styles';
import MyTheme from './MyTheme';

function App() {
  return (
    <MuiThemeProvider theme={MyTheme}>
      {/* 你的组件内容，比如Input */}
      <Input placeholder="试试这个带边框的输入框" />
    </MuiThemeProvider>
  );
}

这样改完之后，你的Input就会显示粉色边框，而不是默认的下划线啦！

内容的提问来源于stack exchange，提问作者Bethany