20

I am trying to learn React. Why can you not use style inside of a return inside of a component?

The Error:

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 Home.

<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">

I have also tried this also:

<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>

or 

<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>

Any help with this syntax would be greatly appreciated. Other people posted they change style to say styles but that did not seem to work either.

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
David Brierton
  • 6,977
  • 12
  • 47
  • 104

5 Answers5

23

From DOC:

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

So instead of background-image use backgroundImage.

For example:

padding-top      --->     paddingTop

padding-left     --->     paddingLeft

margin-right     --->     marginRight

...

How to specify the inline style?

We need to pass a object to style attribute which will contains all the values in form of key-value pair.

Like this:

<div 
    style={{
       backgroundImage: 'url(../images/WinterCalling_2016.jpg)', 
       marginTop: 20}}
>

Update:

We can use template literals to pass a variable inside url, like this:

<div style={{backgroundImage: `url(${image1})`}}>
Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
  • 4
    Note for visitors - typos within your style declaration can cause the `style` attribute to not even appear on render... which can cause it to appear `style` is not working... – random_user_name Aug 22 '19 at 18:06
  • @cale_b can you point out the typo please? will correct that. – Mayank Shukla Aug 22 '19 at 19:05
  • Sorry - not saying _you_ had typos - saying that if you _have_ a typo, it won't work. I found this Q&A because styles were not appearing at all, and discovered that I had a typo in my code: `url(${image1});` - the stray semicolon made it an invalid value, and since there was only one style property, the `style` attribute didn't even appear on the element.... – random_user_name Aug 23 '19 at 14:27
3

React follow the camelcase convention so you have to change background-image to backgroundImage instead.

For more info, see the documentation.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Mμ.
  • 8,382
  • 3
  • 26
  • 36
  • `url` accepts a string, so I don't think that would work. You can use string templates instead, like the one in this post: http://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles – Mμ. May 22 '17 at 03:06
  • To be somewhat more clear - _javascript_ follows the camelcase convention, and React is javascript, so it in turn follows the camelCase convention.... – random_user_name Aug 23 '19 at 14:28
2

If you want to use the style property, please provide a JavaScript dictionary object. However, the style key for background-image is backgroundImage.

<div 
    className="single_slide" 
    style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}
>
Ivor Zhou
  • 1,241
  • 13
  • 22
  • @DavidBrierton Yes you can do that. Depending on what's the webpack resource loader you are using, you might get a URL of base64 data or a static file url. – Ivor Zhou May 22 '17 at 03:05
  • @DavidBrierton and you will need to use the template literal as Mayank Shukla's answer shows. – Ivor Zhou May 22 '17 at 03:06
-2

Did you try wrapping background-image in quotes?

i.e.

<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>

This seems to work for me (at least, when testing with the background-color property; I don't have an image on hand to test with for background-image)

Sebastian Mobo
  • 1
  • 1
  • 2
-3

or you can use '!important' with this ....like "background-color:red!important" Note: And call your js in footer .Because sometimes js reacts first when we call that in header.so call your 'js' in footer.

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

style="background-color:red;"

webtrackstudio
  • 1
  • 3
  • 1
    Its not nice presented what you want to say. And furthermore I have the impression it don't add new content to this question. – and-bri Sep 07 '17 at 05:01