Как настроить стиль подчеркивания 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

Чтобы определить, как это сделать, полезно посмотреть, как выполняется стиль по умолчанию в Ввод .

: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

Не уверен, какую версию material-ui вы используете, но вы можете переопределять классы по мере необходимости, см. Следующую документацию API:

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

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