如何在不使用主题的情况下自定义 Material-UI 的下划线？答案

【问题标题】：How do I custom style the underline of Material-UI without using theme?如何在不使用主题的情况下自定义 Material-UI 的下划线？
【发布时间】：2019-09-25 04:30:59
【问题描述】：

当variant="outlined" 和我在InputProps 中使用notchedOutline 时，我在大纲自定义样式方面取得了成功。

否则 - variant=[anything else] 仅存在底部边框 - 它不起作用，即使 underline 作为 InputProps 中的键/类。

我什至尝试过root。

export default ({ boxType, classes, value, onChange, style }) => (
  <TextField
    variant={boxType || "standard"}
    value={value}
    onChange={onChange}
    InputProps={{
      classes: {
        notchedOutline: classes.notchedOutline,
        underline: classes.underline,
        root: classes.TextInputField
      },
      style
    }}
  />
)

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

为了确定如何执行此操作，查看Input 中的默认样式是如何完成的会很有帮助。

:before 用于默认和悬停样式，:after 用于焦点样式。

这是一个如何设置样式的工作示例：

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  underline: {
    "&:before": {
      borderBottom: "2px solid green"
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      borderBottom: "2px solid blue"
    },
    "&:after": {
      borderBottom: "3px solid purple"
    }
  },
  disabled: {},
  focused: {},
  error: {}
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField InputProps={{ classes }} />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

【讨论】：

我认为你正在做某事:-)。给我一点。
工作就像一个魅力！

【解决方案2】：

你可以使用 InputProps={{ disableUnderline: true }}.它将在所有情况下禁用 textField 的下划线。在 react-material-ui 版本 3 及更高版本上测试。

【讨论】：

【解决方案3】：

不确定您使用的是哪个版本的 material-ui，但您可以根据需要覆盖类，请参阅以下 API 文档：

https://material-ui.com/api/outlined-input/#demos

https://material-ui.com/api/outlined-input/

【讨论】：

该列表中没有针对underline的类。

【解决方案4】：

const useStyles = makeStyles({
  underline: {
    "&&&:before": {
      borderBottom: "none"
    },
    "&&:after": {
      borderBottom: "none"
    }
  }
});

三重 & 增加了 css 规则的特殊性，所以我们可以覆盖默认样式。就我而言，我将其设置为无。您可以根据需要设置样式。

【讨论】：