How to use CSS inside a React + Material-UI project?

Question

I'm working on a project written in React (using TypeScript) with the Material-UI library.

I'd like to use an animated submit button, replacing the default button of the library. To do so, I adapted this button, which I found here, to work inside React: I put the CSS file inside a "styles" folder and then I imported it in the .tsx file of my Button. I adapted the HTML code to JSX so my render method looks like that:

return(
    <button className={`submit-button ${btnState}`} onClick={handleClickOpen}>
        <span className="pre-state-msg">Submit</span>
        <span className="current-state-msg hide">Sending...</span>
        <span className="done-state-msg hide">Done!</span>
    </button>
);

The button works just fine, problem is importing the CSS breaks other things in other parts of the application (from what I saw, it breaks the Container component whenever the container doesn't render a component which includes the custom button). Now, I guess it has something to do with how Material-UI works, but I don't really know how to solve this problem.

I know Material-UI suggests to use CSS-in-JS through useStyles hook, withStyles or similar things. The fact is I don't know how to port that CSS file in order to use it like that, I don't even know if this solution supports every CSS feature, such as element>element selector, classList.add, etc.

So, in order to solve this problem, is there a way to use the CSS file without breaking anything? This doc suggests its possible but I had no luck trying. If it's not possible to use pure CSS, is it possible to convert that code to CSS-in-JS, in a way I can either programmatically modify the className of an element or use the classList.add method?

Thanks in advance to anyone who'll spend some time to read this question and try to answer.

Answer 1

It is definitely possible to turn that CSS into JSS which MUI uses under the hood. It's not that hard if you toy around in the JSS playground and see the generated CSS. For instance:

keyframes short_press {
  to: { transform: rotate(360deg); }
}

.submit-button {
  display: block;
}

.submit-button:hover, .submit-button:focus {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.submit-button > span {
  display: block;
}

.submit-button.animated {

}

Will be:

import { makeStyles } from '@material-ui/styles';

let useStyle = makeStyles({
  '@keyframes short_press': {
    to: { transform: 'rotate(360deg)' },
  },
  button: {
    display: 'block',
    '&:hover, &:focus': {
       boxShadow: '0 5px 15px rgba(0, 0, 0, 0.1)',
    },
    '& > span': {
       display: 'block',
    },
    '&.animated': {
      animation: '$short_press 1s infinite linear',
    }
  },});

function YourButton() {
  let css = useStyle();
  return (
    <button className={`${css.button} ${animated ? 'animated' : ''}`}>
      Click
    </button>
   );
}