为了确定如何执行此操作,请查看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);


