React 18 and material UI (@mui). Styles wont append through theme

Question

I've done some research and tries getting themes to work in React v18. Thought i had done it correctly now, with no errors, but yet it won't append any styles to my button.

It builds, with no errors...

What am i missing here guys ?

**Package.json depencencies : **

"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.15.8",
"@mui/material": "^5.15.7",
"@mui/styles": "^5.15.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",

Theme.ts file :

import { createTheme } from '@mui/system';

const muiTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: 'green',
          color: 'green',
        },
      },
    },
  },
});

export default muiTheme;

Usage :

import { Box, Button, Card, CardContent, Grid } from "@mui/material";
import { ThemeProvider, makeStyles } from '@mui/styles';
import muiTheme from '../../muiTheme';

const useStyles = makeStyles((theme:any) => ({
    outlinedButton: {
      // Your custom styles for the outlinedButton class if needed
    },
  }));

const MyDashboard: React.FC = () => {
const classes = useStyles();
return (
   <ThemeProvider theme={muiTheme}>
      <Button className={`${classes.outlinedButton} MuiButton-outlined`} variant="outlined">20 minutes</Button>
...
...

)}

Result :

Answer 1

I think your ThemeProvider and createTheme need to be imported from @mui/material/styles.

This is a working example:

import { ThemeProvider, createTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import * as ReactDOMClient from "react-dom/client";

export const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: "green",
          color: "green",
        },
      },
    },
  },
});

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <ThemeProvider theme={theme}>
    <Button variant="outlined">20 minutes</Button>
  </ThemeProvider>
);