Pessoal, o correto não seria atribuir as classes da seguinte maneira (passando text-gray-disabled)?
return Btn(
disabled ? "bg-disabled text-gray-disabled" : "bg-primary text-white"
);
Aqui, a cor correta só foi carregada dessa maneira.
Pessoal, o correto não seria atribuir as classes da seguinte maneira (passando text-gray-disabled)?
return Btn(
disabled ? "bg-disabled text-gray-disabled" : "bg-primary text-white"
);
Aqui, a cor correta só foi carregada dessa maneira.
Olá Paulo! Tudo ok contigo?
No código que você compartilhou, você está usando a classe text-gray-disabled. No entanto, no contexto da aula, nós trabalhamos com a configuração do TailwindCSS de uma maneira que separa as cores de texto e de background em contextos diferentes.
No arquivo tailwind.config.js, nós temos um bloco chamado backgroundColor e outro chamado textColor. Cada um desses blocos tem uma propriedade chamada disabled, que se refere à cor que será usada quando o botão estiver desabilitado.
Então, quando você usa a classe bg-disabled, o TailwindCSS busca a cor correspondente ao disabled dentro do bloco backgroundColor. Da mesma forma, quando você usa a classe text-disabled, ele busca a cor correspondente ao disabled dentro do bloco textColor.
Dessa forma, o código return Btn(disabled ? 'bg-disabled text-disabled' : 'bg-primary text-white') está correto, pois ele está usando as cores disabled definidas nos contextos corretos.
Pois, como você pode ver, no minuto 7:37 do vídeo da aula, a propriedade disabled fica fora do bloco gray, então, a menos que busquemos as propriedades primary, secondary, ou tertiary que estão dentro do bloco gray, não precisamos adicionar o gray nessa parte do código.
Era isso, espero ter ajudado!
Se precisar eu estarei por aqui!
Abraços e bons estudos!