CSS no React

Comecei desenvolver um projeto pra faculdade com React e inicialmente pensei em utilizar apenas css puro. Porém comecei a ter problemas com conflito de nomes de classe CSS nas minhas páginas, exemplo:

export default function Login() {
  return (
    <header className="header">
      <img src={Logo} alt="uLift Logo" />
      <span>uLift</span>
    </header>
  );
}

const Header = () => {
  return (
    <header className="header">
      <Link to="/" className="header__link">
        <img src={Logo} alt="uLift Logo" className="header__logo" />
        <span className="header__title">uLift</span>
      </Link>
    </header>
  );
};

Utilizei dois arquivos CSS em diretórios diferentes de cada componente, porém estou tendo conflito das classes onde a classe "header" no Login está pegando o estilo do componente Header.

Qual alternativa tenho além de styled components ?