Quiero establecer las propiedades de estilo de algunos elementos pero no tengo la sintaxis correcta. ¿Alguien puede sugerir dónde me equivoco?
import React from 'react'; import debug from 'debug' const log = debug('app:component:Header'); var bgColors = { "Default": "#81b71a", "Blue": "#00B1E1", "Cyan": "#37BC9B", "Green": "#8CC152", "Red": "#E9573F", "Yellow": "#F6BB42", }; export default class SideBar extends React.Component { constructor(props) { super(props); } render() { return ( <a style="{{backgroundColor: {bgColors.Default}}}" >default</a> <a style="{{backgroundColor: {bgColors.Blue}}}" >blue</a> <a style="{{backgroundColor: {bgColors.Cyan}}}" >cyan</a> <a style="{{backgroundColor: {bgColors.Green}}}" >green</a> <a style="{{backgroundColor: {bgColors.Red}}}" >red</a> <a style="{{backgroundColor: {bgColors.Yellow}}}" >yellow</a> ); } }ACTUALIZACIÓN: para cualquiera que mire esto, vea los comentarios, este no es un código de trabajo.
https://facebook.github.io/react/tips/inline-styles.html
No necesitas las comillas.
<a style={{backgroundColor: bgColors.Yellow}}>yellow</a>Tus citas están en el lugar equivocado. Aquí hay un ejemplo simple:
<div style={{backgroundColor: "#FF0000"}}>red</div>Si desea más de un estilo, esta es la respuesta completa correcta. Esto es div con clase y estilo:
<div className="class-example" style={{width: '300px', height: '150px'}}></div>