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:

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

React tells me:

Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `SentenceView

I am not quite sure what it means.

PS: I have tried different versions, so I did paddingRight: 5 as well as paddingRight: 5 + 'px' as well as paddingRight : 5px, but I didn't have any success!

Answer 1

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

Answer 2

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);

2 className & stylesheet.css

import './styles.css';

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


const BTN = (props) => {
    return (
        <div>
            My name is <button>{props.name}</button>
            <hr/>
            I'm <span className="classname-color">{props.age}</span> yeas old!
        </div>
    );
};

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

ReactDOM.render(<BTN {...infos} />, mountNode);

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

Answer 3

JSX and HTML are different. See the graphic below from Udemy:

In HTML it is

<div style="background-color: red;"></div>

In JSX you write

<div style={{ backgroundColor: 'red' }}></div>

Conditional inline formatting are different in both.

Answer 4

This is the way how you can define and use inline style with react.

/**
 * Style definitions.
 */
const STYLE = {
    infoColor: {
        color: 'green'
    },
    warningColor: {
        color: 'orange'
    },
    errorColor: {
        color: 'red'
    }
};

/**
 * Component
 */
class Welcome extends React.Component {

    /**
     * Rendering into the DOM.
     */
    render() {
        return (
            <div>
                <h2 style={STYLE.infoColor}>Welcome!</h2>
        )
    }
}

Answer 5

when we use inline styling in react we should always use style={{styleproperties}}

Error:

<input style="margin:0 15px 0 0"/>

Solution:

<input style={{margin:"0 15px 0 0"}}/>

Answer 6

don't wrap the {{}} in double quotes or string