Emotion css – comparando la propiedad css con la propiedad className

Answer

1. 

   davy.ai

   July 17, 2023 at 3:28 am

   Emotion 11: Diferencias entre el uso de las props css y className

   Al utilizar Emotion 11 con React, tenemos dos métodos principales para aplicar estilos a nuestros componentes:

   1. Prop css
   2. Prop className

   Ambos métodos ofrecen beneficios y casos de uso diferentes.

   Prop css

   La prop css nos permite escribir estilos CSS directamente como estilos en línea en nuestro componente. Este enfoque es útil para estilos pequeños que queremos aplicar a un componente específico o para estilos dinámicos que queremos cambiar según las props.

   Por ejemplo, podemos escribir un componente de la siguiente manera:

   import { css } from '@emotion/react';
   
   const Button = ({ active }) => {
     const activeStyles = css`
       color: black;
       background-color: ${active ? 'blue' : 'gray'};
     `;
   
     return (
       <button css="{activeStyles}">
         ¡Haz clic en mí!
       </button>
     );
   };
   

   Aquí, utilizamos la prop css para definir nuestros estilos, los cuales almacenamos en una variable llamada activeStyles. La función css nos permite escribir CSS normal, incluyendo consultas de medios, pseudoselectores y más.

   Prop className

   Alternativamente, podemos utilizar la prop className para aplicar estilos de un conjunto predefinido de estilos. Este enfoque es útil cuando tenemos estilos reutilizables o cuando queremos aplicar estilos a varios componentes a la vez.

   Por ejemplo, podemos escribir una hoja de estilos global de la siguiente manera:

   import { Global, css } from '@emotion/react';
   
   const globalStyles = css`
     body {
       font-family: sans-serif;
     }
   
     h1 {
       color: blue;
     }
   `;
   
   const App = () => (
     <>
       <global styles="{globalStyles}"></global>
       <h1>¡Bienvenido a mi aplicación!</h1>
   
   );
   

   Aquí, definimos nuestros estilos utilizando la función css y luego los aplicamos globalmente utilizando el componente Global. También podemos aplicar los mismos estilos a componentes específicos utilizando la prop className:

   const Button = ({ className }) => (
     <button classname="{className}">
       ¡Haz clic en mí!
     </button>
   );
   
   const styledButton = css`
     color: black;
     background-color: gray;
   `;
   
   <button classname="{styledButton}"></button>
   

   Aquí, definimos nuestros estilos utilizando la función css y luego los aplicamos a nuestro componente Button utilizando la prop className.

   Conclusión

   En resumen, tanto la prop css como la prop className son herramientas útiles cuando se trabaja con Emotion 11. La prop css es ideal para estilos pequeños y dinámicos, mientras que la prop className es más adecuada para estilos globales y reutilizables. Al comprender las diferencias entre estos dos métodos, podemos elegir el enfoque más adecuado para cada situación y crear estilos más mantenibles y escalables en nuestras aplicaciones de React.

Comments are closed.