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

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


javascript css reactjs

Use "styles" prop instead of style

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

Here is a great reference from W3Schools which also shows you how to create an object with styling information, and refer to it in the style attribute:reference for how to style React using CSS

javascript css reactjs

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 style={css_object} or style={{color: this.props.color}}

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

React REPL

https://jscomplete.com/repl

1 style Object

// <span style={styles}>const styles = {    color: "red",    background: "#0f0",    fontSize: "32px"};const BTN = (props) => {    return (        <div>           My name is <button>{props.name}</button>           <hr/>           I'm <span style={styles}>{props.age}</span> yeas old!        </div>    );};const infos = {    name: "xgqfrms",    age: 23};ReactDOM.render(<BTN {...infos} />, mountNode);// <span style={{color: styles.color}}>const styles = {    color: "red",    background: "#0f0",    fontSize: "32px"};const BTN = (props) => {    return (        <div>           My name is <button>{props.name}</button>           <hr/>           I'm <span style={{color: styles.color}}>{props.age}</span> yeas old!        </div>    );};const infos = {    name: "xgqfrms",    age: 23};ReactDOM.render(<BTN {...infos} />, mountNode);
Expand snippet