Sobre os arquivos CSS no react

Oi, João , tudo bem?

Não há um conflito quando utilizamos um mesmo nome para classes em componentes diferentes, mas sim uma sobreposição de estilos. Por exemplo, suponha que no componente banner criemos a classe "principal" e aplicamos uma cor de fundo azul e um alinhamento de texto ao centro. Utilizamos o mesmo nome "principal" para definir os estilos dentro da componente formulário e aplicamos uma cor de fundo vermelha e uma margem no topo de 24px.

Ao renderizarmos a página a leitura dos arquivos começa com a importação do banner no topo da página seguida pela importação do formulário, o mesmo acontece com a leitura dos estilos aplicados a cada um dos componentes, sendo lido primeiro os estilos aplicados ao banner e em seguida os aplicados ao formulário. Dessa forma como ambos apresentam a classe "principal" primeiro serão lidos os estilos da classe principal do banner que incluem a cor de fundo azul e o alinhamento de texto ao centro e depois serão lidos os estilos da classe principal aplicados ao formulário, caso haja alguma propriedade igual, ela será sobreposta à propriedade lida anteriormente no caso como no formulário a cor de fundo foi definida como vermelho, para ambos (banner e formulário) a cor de fundo será vermelha, mesmo que para o banner se deseje aplicar uma cor de fundo azul e para o formulário uma cor de fundo vermelha.

Sendo assim, é importante definir nomes específicos para cada uma das componentes que criamos no nosso projeto, para evitar que os estilos acabem se misturando. Por isso, se queremos criar um className para o banner, seria interessante usar o nome "banner" e para o formuário seria interessante usar o nome "formulario". Assim, não há problema de sobreposição de estilos.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Show de bola, Rodrigo!