Saltar al contenido

Cómo utilizar los estilos en línea en reactDec, 28thIn reaccionar podemos usar atributo de estilo para añadir los estilos en línea a la …

marzo 13, 2020

 En

reaccionar podemos usar atributo de estilo para añadir los estilos en línea a los elementos DOM, pero tenemos que pasar los estilos como un objeto javascript en lugar de cadena de CSS.

Nota: Las propiedades de los objetos de JavaScript debe ser CamelCased . de

Veamos un ejemplo .

function Post(){
return (

Main heading

some content

)
}

Ahora estamos añadiendo estilos en línea con el componente Post.

function Post(){

const divStyle = {
backgroundColor: "#cccc", // camel cased
height: "100px",
color: 'yellow'
}

return (

Main heading

some content

)
}

En el código anterior, se pasa un objeto divStyle al atributo de estilo.

¿Has visto que estamos utilizando las propiedades de estilo CamelCased como backgroundColor en lugar de color de fondo?

También puede pasar el objeto de estilo directamente en el atributo de estilo en lugar de almacenar ITIN la variable independiente.

function Post(){

return (

Main heading

some content

)
}

Más ejemplos

class Hello extends React.Component {

render() {
return (

Welcome to reactgo.com

)
}
}

Adición BackgroundImage.

function Who(props){

return (

{props.name}

)
}