Saltar al contenido

Primeros pasos con los componentes de estilo en ReactDec, 18thIn este tutorial, vamos a aprender acerca de lo que está labrada …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de lo que está labrado componentes y la forma de utilizarlo en aplicaciones reaccionar.

Lo que se labra componentes? componentes

Styled nos permiten escribir el CSS en JavaScript en lugar de escribir el CSS en archivos separados.

El CSS es automáticamente proveedor prefijado y fácil de mantener nuestra base de código. componentes

Styled generan nombres de las clases únicas por lo que no hay que preocuparse por conflictos de nombres de clase. Véase la

Let en acción.

labró componentes de instalación

Abra su terminal y ejecutar a continuación comando para instalar componentes de estilo.

npm install styled-components import React, { Component } from 'react';
import styled from 'styled-components'

const Mydiv = styled.div`
display:flex;
justify-content:center;
align-items:center;
background-color: #cccc;
height: 100vh;
`

class App extends Component {
render() {
return (

Hello styled components


);
}
}

export default App;

En lo anterior primero se importaron estilo del paquete de componentes labrados, componentes de estilo utiliza los literales plantilla marcan para su estilo reaccionan componentes.

Necesitamos un elemento div a ser de estilo por lo que hemos utilizado styled.div plantilla literal y añadimos nuestros estilos al fin tenemos un componente reaccionan con los estilos añadidos a la misma. salida

¿Usted ha visto en la imagen de nuestro elemento div se hace en el DOM con el nombre de clase única y proveedores prefijos también se añaden para los diferentes navegadores?

función Pasando a los componentes de estilo

También puede pasar funciones a los componentes de estilo y definir estilos basados ​​en sus apoyos.

import React, { Component } from 'react';
import styled from 'styled-components'

const Mydiv = styled.div`
display:flex;
justify-content:center;
align-items:center;
background-color: #cccc;
height: 100vh;
`

const Button = styled.button`
background: ${props => props.primary ? "#007bff" : "#ffc107"};
color: ${props => props.primary ? "#fff" : "#212529"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
cursor:pointer;
`;

class App extends Component {
render() {
return (

Hello styled components


);
}
}

export default App;

En botón con el estilo componente definimos una función que devuelve los diferentes colores en función de los apoyos que se le pasan.

estilos Ampliación

También podemos heredar los estilos para el nuevo componente basado en el componente de estilo anterior y ampliarlo con algunos nuevos estilos.

Aquí hemos utilizado un componente Button creado en el anterior y se lo pasó a la de estilo () constructorto crear un nuevo botón con estilos que se extienden.

import React, { Component } from 'react';
import styled from 'styled-components';

const Button = styled.button`
background: ${props => props.primary ? "#007bff" : "#ffc107"};
color: ${props => props.primary ? "#fff" : "#212529"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
cursor:pointer;
`;

const GreenButton = styled(Button) ` background-color:white
color: green;
border-color: green;
`;

class App extends Component {
render() {
return (

Hello styled components



Green
);
}
}

export default App;