Volver a los apuntes

Instalar y utilizar los comandos básicos de Emotion CSS

Emotion CSS es una biblioteca de CSS que permite escribir estilos en JavaScript que se compilan en CSS, crear estilos reutilizables y dinámicos, y permite la integración con otros frameworks como React.

Instalación de Emotion CSS

Para javascript 
npm install @emotion/react @emotion/styled
Para typescript 
npm install @emotion/react @emotion/styled
npm install @types/@emotion/react @types/@emotion/styled

Importación de Emotion CSS

Usar siempre el comentario de la primera línea para que babel pueda transformar los estilos de Emotion CSS.

Code 
/** jsxImportSource emotion/react */
import styled from '@emotion/styled';
import { css } from '@emotion/react';

Uso de Emotion CSS

Styled Component 
const ContainerStyled = styled.button`
  display: flex;
`

// Establecer propiedades dinámicas
const ContainerPropsStyled = styled.div`
  display: ${(props) => (props.open ? 'block' : 'none')};
`

// Combinar componentes de estilos
const ContainerStyledWhit = styled(ContainerStyled.withComponent('div'))`
  backgroundcolor: white;
`

// Se puede usar en cualquier componente
const Container = () => {
  return (
    <ContainerPropsStyled open={false}>Container</ContainerPropsStyled>
  );
};
CSS Component 
const ContainerCss = css`
  display: flex;
`

// Establecer propiedades dinámicas
const ContainerPropsCss = (open) => css`
  display: ${open ? 'block' : 'none'};
`

// Combinar componentes de estilos
const ContainerCssWhit = css`
  bordercolor: white;
  ${ContainerCss}
`

// Se puede usar en cualquier componente
const Container = () => {
  return (
    <div css={ContainerPropsCss(false)}>Container</div>
  );
};