Estoy tratando de averiguar cómo puedo refactorizar el código para que mis componentes se vean bien. Estoy usando estilo en línea e interno usando makeStyles y classes .

¿Podría alguna experiencia o experto aconsejarme sobre cómo puedo lograr esto? Por ejemplo, ¿puedo agregar este código en otro lugar con style.jsx y luego importarlo donde quiera? ¿Es esta una posible solución?

Por favor vea el código de muestra:

 const useStyles = makeStyles((theme) => ({ root: { minWidth: "15px", "&:hover": { backgroundColor: "#356E44", color: "white", }, }, cardMain: { width: "200", height: "260", margin: "10", "&:hover": { boxShadow: "5px 3px 5px gray", }, }, }));

Uso de lo anterior en componente:

 <Card className={classes.cardMain}> </Card>

Gracias por la ayuda y el esfuerzo