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!

Juan C · Accepted Answer · 2021-08-20 16:12:33Z

104

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

edited Aug 20, 2021 at 16:12

Juan C

801 silver badge11 bronze badges

answered Apr 12, 2017 at 9:50

dattebayo

1,4221 gold badge10 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mohsinulhaq Over a year ago

styles is not a valid jsx attribute...how did this work out?

iceveda06 Over a year ago

agree with comment above, tried styles and it did not work but if i do, 'style' it works. Not sure why this is selected as the answer

Bill Mei Over a year ago

@mohsinulhaq Are you using CSS Modules? If so, then you need className={myStyles}, not styles={myStyles}. CSS Modules automatically transforms your style objects into a className string.

KrnK Over a year ago

This might seem to work but its not actually working. It is not applying these styles with "styles" attribute even though your app will now compile without throwing error. You can even put any invalid name in place of style and your app will compile but you will notice that the intended styles are not being applied. Below you can see Kanishk Verma's answer which explains JSX vs HTML syntax.

mikemaccana · Accepted Answer · 2021-02-10 11:13:19Z

35

There some ways to set style for React Components.

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

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

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

edited Feb 10, 2021 at 11:13

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Jun 24, 2017 at 6:45

xgqfrms

12.4k1 gold badge81 silver badges73 bronze badges

2 Comments

xgqfrms Over a year ago

stackoverflow.com/questions/29921093/…

xgqfrms Over a year ago

stackoverflow.com/questions/40448253/…

mikemaccana · Accepted Answer · 2021-02-10 11:03:38Z

18

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.

edited Feb 10, 2021 at 11:03

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Aug 12, 2019 at 14:01

kanishk verma

4624 silver badges11 bronze badges

3 Comments

B--rian Over a year ago

Did you make the graphics yourself? If not, please share your source!

kanishk verma Over a year ago

The graphics is from the udemy course : udemy.com/course/react-redux/learn/lecture/12531454#overview By stephan Grinder

Sandeep Jain Feb 28 at 12:16

HTML to JSX converter can be used for styling in proper props

zappee · Accepted Answer · 2017-04-12 10:16:53Z

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

answered Apr 12, 2017 at 10:16

zappee

23.2k15 gold badges97 silver badges157 bronze badges

Comments

KARTHIKEYAN.A · Accepted Answer · 2022-06-02 06:35:32Z

4

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"}}/>

answered Jun 2, 2022 at 6:35

KARTHIKEYAN.A

20.5k11 gold badges139 silver badges151 bronze badges

1 Comment

GPP Over a year ago

this was a decent answer, I needed @dattebayo's answer more though because they are demonstrating the correct syntax for handling multiple properties in the styling attribute

zaib · Accepted Answer · 2019-06-27 19:15:10Z

0

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

answered Jun 27, 2019 at 19:15

zaib

692 silver badges3 bronze badges

Comments

ilhan koral · Accepted Answer · 2023-11-22 16:59:10Z

0

If you want to do with inline styling, try to write only width inside your JSX without style Like this:

 <img src="./your-image.png" width="40px" />

answered Nov 22, 2023 at 16:59

ilhan koral

11 bronze badge

Collectives™ on Stack Overflow

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

7 Answers 7

4 Comments

React REPL

1 style Object

2 className & `stylesheet.css`

2 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

React REPL

1 style Object

2 className & stylesheet.css

2 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

2 className & `stylesheet.css`