How do I custom style the underline of Material-UI without using theme?

by

In order to determine how to do this, it is helpful to look at how the default styling is done within Input.

:before is used for the default and hover styling and :after is used for the focused styling.

Here is a working example of how to style it:

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

Edit TextField underline

More Related Contents:

  1. Material UI v4 makeStyles exported from a single file doesn’t retain the styles on refresh
  2. How to add custom MUI palette colors
  3. Global outlined override
  4. Passing props to MUI styles
  5. Change border color on Material-UI TextField
  6. Internal implementation of “makeStyles” in React Material-UI?
  7. Setting text color, outline, and padding on Material-ui Autocomplete component
  8. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  9. Is it possible to override material-ui components default props?
  10. How to use MUI v5 makeStyles without ThemeProvider?
  11. Media queries in MUI components
  12. How do you change a style of a child when hovering over a parent using MUI styles?
  13. Difference between @mui/material/styles and @mui/styles?
  14. × TypeError: Cannot read properties of undefined (reading ‘map’)
  15. React testing library on change for Material UI Select component
  16. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  17. How to add custom Material UI palette colors
  18. Passing props to Material UI styles
  19. Media queries in Material UI components
  20. Material-Ui TextField not affected with the RTL direction
  21. How do you change a style of a child when hovering over a parent using Material UI styles?
  22. Unable to load script.Make sure you are either running a Metro server or that your bundle ‘index.android.bundle’ is packaged correctly for release
  23. What is the difference between HashRouter and BrowserRouter in React?
  24. How to get the width of a react element
  25. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  26. this.setState is undefined
  27. React stateless component this.refs..value?
  28. require is not defined
  29. React: Show loading spinner while images load
  30. import a module from node_modules with babel but failed

Leave a Comment