128

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!

7 Answers 7

102

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

4
  • 28
    styles is not a valid jsx attribute...how did this work out? Commented Feb 26, 2018 at 8:06
  • 19
    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
    – iceveda06
    Commented Mar 1, 2018 at 16:22
  • 4
    @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.
    – Bill Mei
    Commented Aug 27, 2018 at 17:09
  • 1
    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.
    – KrnK
    Commented Aug 16, 2020 at 1:30
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

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

2
17

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

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.

2
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>
        )
    }
}
0
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"}}/>
1
  • 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
    – GPP
    Commented Dec 15, 2023 at 4:53
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.