Utilização do css modules no React

Login.js

// importa em variavel
import style from './Login.module.css';
// podemos desestruturar através { form, input }, mas isso é opcional

const Login = () => {
      // utilizado dinamicamente atraves da prop da className, o legal é que podemos realizar condições para aplicar determinada classe
      const isValidated = true;
      return (
      <form className={ style.form }>
        <input
          type="text"
          className={ style.input }
          placeholder="Digite seu nome"
        />
        <input
          type="email"
          placeholder="Digite seu e-mail"
          className={ style.input }
        />
        <button
            className={isValidated ? style.buttonActive : style.buttonDisabled }
            type="submit"
            title="Clique aqui para jogar">
            Jogar
         </button>
      </form>
    );
}

Login.module.css

/* A classe será gerada como Login_[classe]_[id dinamico do react] evitando conflitos com qualquer outro componente */

.form {
 /* CSS de exemplos normal */
}

.input {
 
}

.form > button {
/* Podemos utilizar pseudo classes a partir de alguma ja existente no app */
}

.buttonActive, .buttonDisabled {
}