How to customize the border for MUI components - reactjs

Question

How can I change the border properties for an MUI Select component using ThemeProvider? I'm able to change the backgroundColor, but for some reason border properties like border and borderColor do not work.
App.js
import React from "react";
import {
ThemeProvider,
Box,
FormControl,
InputLabel,
MenuItem,
Select,
} from "#mui/material";
import theme from "./theme";
function App() {
return (
<ThemeProvider theme={theme}>
<Box sx={{ minWidth: 200, margin: "5%" }}>
<FormControl>
<InputLabel id="demo-simple-select-label">Select Label</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Select Label"
variant="outlined"
sx={{ minWidth: 200 }}
>
<MenuItem value={"1"}>Item 1</MenuItem>
<MenuItem value={"2"}>Item 2</MenuItem>
<MenuItem value={"3"}>Item 3</MenuItem>
</Select>
</FormControl>
</Box>
</ThemeProvider>
);
}
export default App;
theme.js
import { createTheme } from "#mui/material";
const darkGrey = "#262626";
const mediumGrey = "#595959";
const lightGrey = "#adadad";
const white = "#ffffff";
const limeGreen = "3df730";
const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
root: {
backgroundColor: mediumGrey,
border: "4px",
borderColor: "red",
},
},
},
// This doesn't work either
// MuiOutlinedInput: {
// styleOverrides: {
// root: {
// border: "4px",
// borderColor: limeGreen,
// },
// },
// },
MuiInputLabel: {
styleOverrides: {
root: {
color: white,
},
},
},
},
});
export default theme;

Answer 1

There are three main issues here:
First, the styleOverrides of the Select component do not have any root property (see https://mui.com/material-ui/api/select/#css). You can use select instead.
Second, your border doesn't have any specified thickness so it won't be visible.
Third, your limeGreen color doesn't start with a # so it won't be recognized as a hex color.
Here is a fixed version of the styling file:
import { createTheme } from '#mui/material';
const darkGrey = '#262626';
const mediumGrey = '#595959';
const lightGrey = '#adadad';
const white = '#ffffff';
const limeGreen = '#3df730';
const theme = createTheme({
components: {
MuiSelect: {
styleOverrides: {
select: {
backgroundColor: mediumGrey,
border: 'solid 3px',
borderColor: limeGreen,
},
},
},
// This doesn't work either
// MuiOutlinedInput: {
// styleOverrides: {
// root: {
// border: "4px",
// borderColor: limeGreen,
// },
// },
// },
MuiInputLabel: {
styleOverrides: {
root: {
color: white,
},
},
},
},
});
export default theme;