React inline style - style prop expects a mapping from style properties to values, not a string

Question

I am trying to set inline styles in my React application. In this case, for a span:

Answer 1

There some ways to set style for React Components.

https://facebook.github.io/react/docs/context.html

https://github.com/facebookincubator/create-react-app

1. using className="your-class-name"

2. using style={css_object} or style={{color: this.props.color}}

React REPL

https://jscomplete.com/repl

1 className & stylesheet.css

import './styles.css';

/*
.classname-color{
    color: "red";
    background: "#0f0";
}
*/


const BTN = (props) => {
    return (
        

            My name is {props.name}
            

            I'm {props.age} yeas old!
        
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(, mountNode);

.classname-color{
    color: "red";
    background: "#0f0";
}

2 style Object

// 

const styles = {
    color: "red",
    background: "#0f0",
    fontSize: "32px"
};

const BTN = (props) => {
    return (
        

           My name is {props.name}
           

           I'm {props.age} yeas old!
        
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(, mountNode);




// 

const styles = {
    color: "red",
    background: "#0f0",
    fontSize: "32px"
};

const BTN = (props) => {
    return (
        

           My name is {props.name}
           

           I'm {props.age} yeas old!
        
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(, mountNode);