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.
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.
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>
);
}
Related answers: