Material UI: Is it possible to put the makeStyle styles in a separate file? [duplicate]

Question

I would be happy to be able to put the Hook API styles in a separate file for cleanliness purposes.

Do you know if it is possible and how it can be done? I didn't find anything aobut it in the official docs and everything I've tried has failed.

Answer 1

makeStyles returns you a useStyles hook that you call within your functional component. You can definitely move it out into a separate file and import the useStyles hook

styles.js

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

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

export { useStyles };

component.js

import React from 'react';
import {useStyles} from './styles.js'
export default function MyComponent(props) {
  const classes = useStyles(props);
  return <div className={classes.root} />;
}