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 />

Etiquetas anidadas

import { Box } from './styled';
export default () => <Box><div></div></Box>;
import styled from 'styled-components';

export const Box = styled.div`
    background-color: salmon;
    padding: 30px;

    div{
        background-color: palegreen;
        width: 100px;
        height: 100px;
    }
`;

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;
`;

Ejercicio

Crear un styled-component y cuando pulsemos sobre un botón, que cambie de color.

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
Hacer un popup con React →

Aviso Legal | Política de privacidad