Компонент React css дюйм JS

Question

Я новичок в React, и я могу понять разницу между React.Component и функцией.

На этих двух изображениях у меня одинаковый HTML и тот же CSS, но мой CSS делается в файле javascript. Когда я использую CSS в функции, он работает, но в компоненте реакции - нет.

Component

render() {
  const classes = useStyles();
  return (
    <div style={section}>
      <div style={container}>
        <div>
           <div style={title}>
             <h1>TEste</h1>
           </div>
        </div>
      </div>
    </div>
  )
}

Функция

const classes = useStyles();

return (
  <div className={classes.section}>
    <div className={classes.container}>
      <div>
        <div className={classes.title}>
          <h1>1</h1>
        </div>
      </div>
    </div>
  </div>
);