makestyles material ui just render only one code example

Example 1: use theme in component mui

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.secondary.main
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    

      
Hello CodeSandbox
      
Start editing to see some magic happen!
    
  );
}

Example 2: use theme in class component material ui

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

const styles = theme => ({
  root: {
    backgroundColor: "red"
  }
});

class ClassComponent extends Component {
  state = {
    searchNodes: ""
  };

  render() {
    const { classes } = this.props;
    return (
      
Hello!
    );
  }
}

export default withStyles(styles, { withTheme: true })(ClassComponent);