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

Question

在variant="outlined"上使用轮廓自定义样式取得成功，并且在notchedOutline中使用InputProps。

否则-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
    }}
  />
)

Answer 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);

Answer 2

您可以使用 InputProps={{ disableUnderline: true }}。在所有情况下，它将禁用textField的underLine。 在react-material-ui版本3及更高版本上进行了测试。

Answer 3

不确定所使用的Material-ui版本，但可以根据需要覆盖类，请参见以下API文档：

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

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