Styled Components

Contactar con el profesor

npm i styled-components

Usaremos el siguiente plugin de visual studio code: vscode-styled-components from Julien Poissonnier.

import styled from 'styled-components';

export const Cuadrado = styled.div`
  width: 70px;
  height: 70px;
  background-color: pink;
`;
import { Cuadrado } from './styled';
...
<Cuadrado />

Hacer hover

export const Panel = styled.div`
  background-color: salmon;
  &:hover {
	  background-color: paleGreen
  }
`;

Heredar de otro componente

export const Rectangulo = styled(Cuadrado)`
  width: 200px;
`;

Usando props

Para personalizar el comportamiento de los styled componentes, usaremos siempre props con valores booleanos, con el propósito de no complicar la lógica que va dentro de la definición del styled component.

Estilos en función de props

export const Component = styled.div`
  background-color: ${({ isRight}) => isRight ? 'green' : 'red'};
`;

Atributos en función de props

<Input myMaxLength={2}/>
export const Input = styled.input.attrs(props => ({
    type: "password",
    maxLength: props.myMaxLength || 5,
    }))`
  color: blue;
`;

Incrustar código

// El código de BigText debe estar definido antes de ser usado

import styled, { css } from 'styled-components';

const BigText = css`
	font-size: 3rem;
`;

export const RedText = styled.p`
	background: red;
	${BigText};
`;

export const BlueText = styled.p`
	background: blue;
	${BigText}
`;

Para hacer media queries

const desktopStartWidth = 996;

const desktop = `@media (min-width: ${desktopStartWidth}px)`;
const mobile = `@media (max-width: ${desktopStartWidth}px)`;

const Cuadrado = styled.div`
	...
	${mobile} {
		width:100%;
	}
`;

Para maquetar el body

import styled, { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
	body {
		background-color: salmon;
	}
`;
./src/App.js
import { GlobalStyle } from '../../styled';

export default _ => (
    <div>
      <GlobalStyle />
      <App/> 
    </div>
);
← Style
Cambiar el favicon →

Aviso Legal | Política de privacidad