Material UI v.4 Theme provider and StylesProvider. I can't use the "classes" prop of a component to override the styles

I'm trying to set advanced usage Material UI v.4 Theme provider and StylesProvider
I can't use the "classes" prop of a component to override the styles.

I follow that instruction and some experience from past projects. Advanced Material UI v 4.12.3

My App.js:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { ThemeProvider, StylesProvider } from "@material-ui/core/styles";
import theme from "./styles/theme";

import store from "./redux/store";
import AppRouter from "./routes/AppRouter";
import ErrorBoundary from "./ErrorBoundary";

ReactDOM.render(
  <Provider store={store}>
    <ErrorBoundary>
      <StylesProvider injectFirst>
        <ThemeProvider theme={theme}>
          <AppRouter />
        </ThemeProvider>
      </StylesProvider>
    </ErrorBoundary>
  </Provider>,
  document.getElementById("root"),
);

part of package.json:

 "dependencies": {
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
   }

  "devDependencies": {
    "@material-ui/core": "^4.9.12",
    "@material-ui/pickers": "^3.2.10",
   }

theme.js

import { createTheme } from "@material-ui/core/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#08718f",
    },
    secondary: {
      main: "#604486",
    },
  },
});

export default theme;

image-preview.scss

.previewButton {
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  margin-right: 7px;
  margin-bottom: 7px;
  opacity: 0.6;

  &:hover {
    border: 1px solid #3f51b5;
    opacity: 1;
  }
}

SomeComponent.js

import { Button } from "@material-ui/core";
import "../../styles/common/image-preview.scss";



          {imageObj?.map((el, index) => (
            <Button
              className='previewButton'
              key={el.id}
              onClick={() => setSelectedImage(index)}
            >
              <img className='imageButton' src={el.url} alt={el.imgName} />
            </Button>
          ))}

This code above works great. I can easily rewrite Material UI components with the flag "injectFirst" from App.js .

Inside Button, I can change the style className=`previewButton' it works

But if I made these changes. I can't use the "classes" prop of a component to override the styles. className={classes.previewButton}

SomeComponent.js

import { Button } from "@material-ui/core";
import classes "../../styles/globalStyle.module.scss";



          {imageObj?.map((el, index) => (
            <Button
             className={classes.previewButton}
              key={el.id}
              onClick={() => setSelectedImage(index)}
            >
              <img className='imageButton' src={el.url} alt={el.imgName} />
            </Button>
          ))}

globalStyle.module.scss

.previewButton {
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  margin-right: 7px;
  margin-bottom: 7px;
  opacity: 0.6;

  &:hover {
    border: 1px solid #3f51b5;
    opacity: 1;
  }
}

Maybe I missed something? Any help will help!