manipulating Material-UI with a .css file

Question

Is there any way to customize Material-UI elements with CSS sheets?

I mean, I know about the {makeStyles} method and overriding with JSS, but it looks awful in the code, and moduling it on other arcives gets confusing, I was wondering if there is any workaround to put it all together in a css archive of sorts.

Answer 1

LOL I just needed some more specific Google-fu

This is how I solved it:

import React from 'react';
import ReactDOM from 'react-dom';
import { StylesProvider } from "@material-ui/styles";
import App from './App';
import './GlobalCSS.css'

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <App />
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

The point is adding the tag inside your tag in index.js, and pointing your css in that same file, now you can use the predefined class names or override your class name.