Menu
I want to set the style properties of some elements but I don't have the syntax correct. Can anyone suggest where I am wrong?
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> ); } } UPDATE: for anyone looking at this please see comments this is not working code.
437
To set inline styles in React: Set the style prop on the element to an object. Set the specific CSS properties and values to style the element. For example, <div style={{backgroundColor: 'salmon', color: 'white'}}> .
To set text color in React, we can set the style prop to an object with the color property. to set the style prop of the h1 element to an object that has the color property set to 'red' . Now we should see that the color of the text is red.
To set a background image with inline styles in React: Set the style prop on the img element. Set the backgroundColor property in the style object. For example, backgroundImage: url(${MyBackgroundImage}) .
https://facebook.github.io/react/tips/inline-styles.html
You don't need the quotes.
<a style={{backgroundColor: bgColors.Yellow}}>yellow</a> Your quotes are in the wrong spot. Here's a simple example:
<div style={{backgroundColor: "#FF0000"}}>red</div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
