Jss autoprefixer in react project using material UI and nextjs

Question

I'm creating a react-js project using material UI and nextjs framework. I want to add an autoprefixer to my jss styles to support most browsers.

my styles are implemented by material UI makeStyle like this:

const useStyles = makeStyles((theme) => ({
  container: {
    height: '100px',
    width: '100px',
 background: 'linear-gradient(to bottom, white, black)',
  },
}));

export default useStyles;

and import to my react components like this :

import Styles from './Styles';

const MyReactComponent = () => {
const classes = Styles();
return <div className={classes.container}> myTestContainer </div>;
};

everything works fine but I want to autoprefix my jss styles that in the end my style would be somthing like this :

.container: {
    height: 100px;
    width: 100px;
 background: linear-gradient(to bottom, white, black);
 background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
 background: -o-linear-gradient(top, white, black);
 background: linear-gradient(to bottom, white, black);
  },

How should I autoprefix my jss styles?