Así que vemos que hay aquí, algo está sucediendo ahí mismo. No sé qué está pasando. Algo está creciendo. Este es un error muy interesante. Veamos. Mm-mm. Hola. Hay algo sucediendo con este componente. No sé si algo sucedió, pero, oh. Algo se está, oh, aquí está. Entonces nuestra aplicación está inyectando algunas propiedades que no necesitamos, el CSS, el Salient Center. Bien, lo voy a eliminar. Bien, ahora funciona bien. A veces debemos tener cuidado con estas cosas. Pero de todos modos, acabo de mostrar la alerta ahí, la voy a dejar como un error. Pero en lugar de un error, hagámosla una información, porque no tenemos problemas en este momento. Podemos simplemente llamarla, hola, esta es mi aplicación. Hola, estoy creando una aplicación de componentes reutilizables, lo que sea, aquí está. Y luego lo vemos ahí. Muy bien, genial. Fantástico. Muy bien, chicos. Agregamos los tres componentes justo ahí. Y solo para que lo sepan, estamos terminando, casi terminando la segunda sección, implementación. Y vamos a tomar un descanso de cinco minutos una vez que lo hagamos. Aún no lo hemos hecho, pero estaremos muy, muy cerca. Los controles de arquetipos, ya les mostré lo que hacen. Y la última parte de esto es escribir estilos personalizados para nuestros componentes. Probablemente eso es algo que ya se estaban preguntando, cómo podemos hacerlo, ¿verdad? Muy bien, si miran la documentación de MUI, hay muchas cosas que pueden hacer en términos de estilización. Pueden usar CSS básico. Pueden usar componentes de estilo. Pueden usar módulos de CSS. Pueden usar Tailwind. Y hasta hace un año podían usar JSX. Ahora se llama TSX. Miren, soy un gran fan de JSX, y lo uso mucho. Pero sí, es triste que se estén alejando de él. De todos modos, debo decir que MUI ahora, la última versión viene con Emotion. Así que ya tienen Emotion ahí. Si son grandes fanáticos de los componentes de estilo, y necesitan instalar los componentes de estilo por su cuenta. Entonces, si miran aquí, tienen los pasos sobre cómo instalarlo. También tienen que instalar la biblioteca. Eso es para que lo sepan. ¿De acuerdo? Pero Emotion viene incluido. Y miren, tal vez quieran quedarse con el CSS básico, pero déjenme decirles algo. Si lo usan, no obtendrán todas las capacidades de MUI. Todo el tema que ya creamos, eso es la base de lo que viene después. Las capacidades que veremos ahora, realmente no las pueden obtener con CSS básico. Así que tal vez quieran llevar su juego al siguiente nivel, ¿de acuerdo? Y aquí voy a hablar sobre Emotion. Lo voy a hacer en Emotion porque así funciona MUI. Emotion es bastante similar a los componentes de estilo, por cierto. Y voy a hablar sobre la prop style y el estilo en la prop SX, ¿de acuerdo? El estilo es el motor detrás de esta estilización. El estilo que vamos a agregar a los componentes ahora es el que inyectará el tema a nuestros componentes y se usa esta función, style, ¿de acuerdo? Y lo vamos a cubrir en un segundo. Es bastante simple. No se asusten. Y otra cosa es la prop SX. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. La prop SX también es un cambio de juego. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Creo que es súper, súper útil, súper simple. Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo Esta es una comparación rápida de la API de los componentes de estilo y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. y el uso del sistema de MUI. Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, Con la prop SX, pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo pueden especificar estas props ahí mismo y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. y comenzar a inyectar los tokens de diseño del tema desde ahí. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Sin agregar toda esta configuración. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Se ve mucho más limpio. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ven la caja. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Ya usamos la caja antes. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Pueden tener SX y pueden agregar estas cosas ahí mismo. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Incluso moverlas a un archivo diferente. Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, Pero si ven eso, ven el color del texto secundario, esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño esos son como los tokens de diseño que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. que ya agregamos en nuestro tema. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Así es como lo harían. Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario Dominio primario, oscuro secundario y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. y pueden agregar más como quieran. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. Lo cual es súper, súper útil. De todos modos, vamos a escribir un estilo personalizado simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple De todos modos, vamos a escribir solo un estilo personalizado muy simple para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. para que vean cómo funciona. Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, Así que en nuestro botón, este CSS, ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. ya no lo usamos. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Así que simplemente lo podemos eliminar. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. Y vamos a agregar un nuevo archivo llamado button styles. JS. JS. JS. JS. JS. JS. JS. La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS La razón por la que lo llamo button style JS en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. en lugar de styles es la misma idea que mencioné antes. Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer Si tu biblioteca de componentes comienza a crecer y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. y tiene como 30 componentes en total. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Pero si tienes 30 componentes, he visto eso. Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, Obtendrás como cada vez que intentes encontrar un archivo, verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen verás que todos estos estilos aparecen cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. cuando intentas encontrarlo. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Es más difícil encontrar esas cosas. Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, Si tienes el nombre del componente y los estilos, entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? entonces es mucho más fácil encontrar cosas, ¿verdad? Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, Por ejemplo, si quiero encontrar la configuración del botón, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, solo escribo botón, y luego obtengo los estilos, la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? la lógica y el almacenamiento de inmediato, ¿verdad? Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas Es mucho más fácil descubrir cosas siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. siguiendo este enfoque. Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? Entonces, ¿cómo funciona esto? No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, No sé si están familiarizados con JSX, por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. por cierto, mi linter se queja. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Voy a agregar esta regla. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Esto no es algo que quieran hacer. Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración Aquí está el linter, probablemente quieran hacer una configuración para eso. para eso. para eso. para eso. para eso. para eso. para eso. No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, No vamos a cubrir esto en este taller, pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor pero solo para que se vea mejor que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, que simplemente tener esas cosas ahí, voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? voy a agregar esta línea en la parte superior, ¿de acuerdo? Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, Así agregué esos estilos, lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. lo vamos a cubrir en un segundo. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. Es bastante simple. No se asusten. No se asusten. No se asusten. No se asusten. No se asusten. No se asusten. No se asusten. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX. Y una cosa más, la prop SX
Comments