(SUGESTÃO) Poderia ter utilizado o SASS Modules

Eu acho muito interessante o instrutor ter explicado como contornar o problema de nome de classes para evitar conflito entre elas, porém, quando trabalhamos em projetos grandes no mundo real isso acaba sendo um pouco complicado.

Fica como minha sugestão usar o module sass que gosto bastante!

Para instalá-lo numa aplicação que usa o CRA(create-react-app) é muito simples, basta rodar:

npm i -D sass

A estrutura de cada pasta de componente passaria a ficar:

ListaDeNotas
--ListaDeNotas.module.scss
--ListaDeNotas.jsx

O legal é que você ganha a força do SASS e de bônus a gestão automática de nomes únicos para suas classes num escopo modular. Para importar no seu componente jsx, basta utilizar da seguinte maneira:

import classes from './MyComponent.module.scss';
/*
** Some code here
*/
return (
  <h1 className={classes.title} />
)

E a mágica simplesmente acontece.. Quando o código for compilado você verá um nome único de classe, no meu caso de exemplo para o componente: MyComponent, a classe .title ficaria em seu navegador algo assim:

MyComponent_title__2T_Cd

(NomeDoComponente_NomeDaClasse_HashÚnico)