1

Is it possible to style Material-UI without using the makeStyles feature, for example, css? Just trying to understand how Material-UI style works.

The red style on the bottom is the style I'm trying to achieve with simple css here.

enter image description here

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
Zoe L
  • 1,150
  • 14
  • 22

1 Answers1

0

Below is an example of how to customize the various colors in an outlined select using simple CSS.

styles.css

.customSelect {
  width: 200px;
}
.customSelect .MuiInputLabel-root {
  color: red;
}
.customSelect .MuiInputBase-input {
  color: green;
}
.customSelect .MuiOutlinedInput-notchedOutline {
  border-color: red;
}
.customSelect:hover .MuiOutlinedInput-notchedOutline {
  border-color: orange;
}
.customSelect
  .MuiOutlinedInput-root.Mui-focused
  .MuiOutlinedInput-notchedOutline {
  border-color: purple;
}
.customSelectMenu .MuiMenuItem-root {
  color: blue;
}

App.js

import React from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  const [value, setValue] = React.useState("");
  return (
    <TextField
      className="customSelect"
      label="Sale Type"
      required
      select
      value={value}
      onChange={event => setValue(event.target.value)}
      variant="outlined"
      SelectProps={{ MenuProps: { className: "customSelectMenu" } }}
    >
      <MenuItem value={1}>Sale Type 1</MenuItem>
      <MenuItem value={2}>Sale Type 2</MenuItem>
    </TextField>
  );
}

Edit Customize TextField via CSS

Related answers:

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • Pardon my nood 2 days efforts with react. How would I do this in V5 and with scss? Can't figure out all the classed dependencies and hierarchy. – StronkStinq May 19 '23 at 19:25