# Styling in React

**URL:** <https://forum.kirupa.com/t/styling-in-react/636204>\
**Category:** programming\
**Created:** [March 20, 2017, 1:52am UTC](https://forum.kirupa.com/t/styling-in-react/636204 "2017-03-20T01:52:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2017, 1:52am UTC](https://forum.kirupa.com/t/styling-in-react/636204/1 "2017-03-20T01:52:45Z")

</div>

For generations, mankind (and probably really smart dolphins) have styled their HTML content using CSS. Things were good. With CSS, you had a good separation between the content and the presentation. The selector syntax gave you a lot of flexibility in choosing which elements to style and which ones to skip. You couldn't even find too many issues to hate the _whole cascading thing_ that CSS is all about.

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/react/styling\_in\_react.htm](http://www.kirupa.com/react/styling_in_react.htm)

---

<div class="post-metadata">

**Author:** ![marionoble](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marionoble](https://forum.kirupa.com/u/marionoble)\
**Post date:** [March 28, 2017, 5:03pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/2 "2017-03-28T17:03:47Z")

</div>

Great tutorial and I loved the book! Running thru the chapters using your website version now. FYI: I noticed a warning gets kicked out on the console when fontSize: “32” is applied. The recommendation seems to be to use fontSize: 32 without quotes instead.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 28, 2017, 7:55pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/3 "2017-03-28T19:55:06Z")

</div>

Glad you liked the article and the book! I’ll update the tutorial shortly, and I’ve marked this as something to address in the next version of the book. I’m sure that in a few releases (~few months given how fast they make improvements :P) that this will turn from a warning into an error haha.

---

<div class="post-metadata">

**Author:** ![marionoble](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marionoble](https://forum.kirupa.com/u/marionoble)\
**Post date:** [March 29, 2017, 12:30am UTC](https://forum.kirupa.com/t/styling-in-react/636204/4 "2017-03-29T00:30:21Z")

</div>

No problem! I know things change at the speed to light in this industry. I fully expect things to be deprecated. At least you’re providing a decent foundation/starting point. You’ve written one of the better tech books I’ve read and I’ve read a lot of them. Thanks again! I’ll be writing a good Amazon review soon.

---

<div class="post-metadata">

**Author:** ![askeladde](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@askeladde](https://forum.kirupa.com/u/askeladde)\
**Post date:** [June 30, 2017, 8:07am UTC](https://forum.kirupa.com/t/styling-in-react/636204/5 "2017-06-30T08:07:54Z")

</div>

Loved the tutorial Kirupa. Got me thinking too so I was Inspired to create a Sublime Text 3 Plugin after finishing the tutorial to help everybody style css in camelCase that is acceptable to React. I really hope this can help everyone avoid the tediousness of converting regular CSS to react acceptable css by hand.

> **[davidfufu/React-CSS-Notation-Converter](https://github.com/davidfufu/React-CSS-Notation-Converter)**
>
> React-CSS-Notation-Converter - Converts CSS to and from regular notation to react acceptable css notation.

  
 ![](http://i.imgur.com/VfiYZph.gif)

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [November 1, 2017, 4:43pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/6 "2017-11-01T16:43:56Z")

</div>

Greetings!  
One thing is a bit confusing - you go from  
`
var Letter = React.createClass({
render: function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: “#ffde00”,
color: “#333”,
display: “inline-block”,
fontFamily: “monospace”,
fontSize: 32,
textAlign: “center”
};
`  
to  
`
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: “#ffde00”,
color: “#333”,
display: “inline-block”,
fontFamily: “monospace”,
fontSize: 32,
textAlign: “center”
};
`

From createClass to React.Component is a bit confusing for new users. 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 1, 2017, 5:18pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/7 "2017-11-01T17:18:51Z")

</div>

Melissa!!! Long time no see 🙂

Thanks for pointing that out. That’s a bug I need to fix. I was going through and revamping everything to use the class syntax (since React 16 is deprecating createClass), and I missed some of them.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [November 7, 2017, 7:53am UTC](https://forum.kirupa.com/t/styling-in-react/636204/8 "2017-11-07T07:53:36Z")

</div>

I don’t have anything to add other than:

Hey lunatic!!!

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [November 7, 2017, 2:59pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/9 "2017-11-07T14:59:11Z")

</div>

Ha, whaddup kril? Long time no see. 🙂

Thanks K, the tutorials are great!

---

<div class="post-metadata">

**Author:** ![Shyam\_Prasath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shyam_prasath/32/8782_2.png) [@Shyam\_Prasath](https://forum.kirupa.com/u/Shyam_Prasath)\
**Post date:** [November 13, 2017, 10:10am UTC](https://forum.kirupa.com/t/styling-in-react/636204/10 "2017-11-13T10:10:41Z")

</div>

Hi kirupa ,

I am new to react and have a doubt here , while just tried exploring , if i define the object letterstyle outside of my render function and try to use it in the return i am getting the unexpected token error . why is that ??

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 13, 2017, 4:35pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/11 "2017-11-13T16:35:11Z")

</div>

That shouldn’t really happen, but then again - code is strange 😛 Can you post a snippet of your code? We’ll take a look!

---

<div class="post-metadata">

**Author:** ![Shyam\_Prasath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shyam_prasath/32/8782_2.png) [@Shyam\_Prasath](https://forum.kirupa.com/u/Shyam_Prasath)\
**Post date:** [November 14, 2017, 6:54am UTC](https://forum.kirupa.com/t/styling-in-react/636204/12 "2017-11-14T06:54:38Z")

</div>

```
import React , { Component } from 'react'; 

class Test extends Component {

  render(){

    var myStyle={
    backgroundColor:"red",
    width:"100px",
    height:"100px",
    margin:"0 auto",
    marginTop:"50px"
};
    return(
       <div style={myStyle}>

      </div>
    );
  }
}

export default Test;

```

this code throws me the unexpected token error , as i am defining the myStyle object outside the render function , i thought the scope of this object will be for the entire component .The Same works correctly when it is used within the function .

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 14, 2017, 4:33pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/13 "2017-11-14T16:33:37Z")

</div>

I just tested your code as-is on my machine, and your code works just fine! Is there a specific line the unexpected token error is happening on?

---

<div class="post-metadata">

**Author:** ![Shyam\_Prasath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shyam_prasath/32/8782_2.png) [@Shyam\_Prasath](https://forum.kirupa.com/u/Shyam_Prasath)\
**Post date:** [November 14, 2017, 5:55pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/14 "2017-11-14T17:55:46Z")

</div>

my bad , the variable mystyle has to be outside of the render function . This is the correct code .

```
import React , { Component } from 'react'; 

class Test extends Component {
 var myStyle={
    backgroundColor:"red",
    width:"100px",
    height:"100px",
    margin:"0 auto",
    marginTop:"50px"
};

  render(){

   
    return(
       <div style={myStyle}>

      </div>
    );
  }
}

export default Test;
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 15, 2017, 4:43am UTC](https://forum.kirupa.com/t/styling-in-react/636204/15 "2017-11-15T04:43:34Z")

</div>

Glad it worked, but the variable being inside the render function is totally OK as well 🙂

If you are still curious as to what the issue is, feel free to revert back to the error prone state and attach the JS files here.

---

<div class="post-metadata">

**Author:** ![Shyam\_Prasath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shyam_prasath/32/8782_2.png) [@Shyam\_Prasath](https://forum.kirupa.com/u/Shyam_Prasath)\
**Post date:** [November 15, 2017, 6:32am UTC](https://forum.kirupa.com/t/styling-in-react/636204/16 "2017-11-15T06:32:57Z")

</div>

Hi Kirupa ,

I think i have put my words in a wrong way 😐 , the above code is the one ( with the myStyle object being declared outside the render function ) that gives me the unexpected token error . You can test that code in your machine .

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 15, 2017, 12:03pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/17 "2017-11-15T12:03:30Z")

</div>

You can’t have var declarations in the class body like that. They need to be in a class method (such as render) or outside of the class altogether.

---

<div class="post-metadata">

**Author:** ![Rafic\_Jouejati](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rafic_jouejati/32/8817_2.png) [@Rafic\_Jouejati](https://forum.kirupa.com/u/Rafic_Jouejati)\
**Post date:** [November 21, 2017, 5:48pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/18 "2017-11-21T17:48:15Z")

</div>

Mr. Kirupa,

Thanks for another great tutorial. My question is about why the Letter component is defined in 2 different ways.

In the first example, you use class Letter extends React.Component, in the next example, you use var Letter = React.createClass{()}, and last example back to the Letter extends React Component. Is there a reason for that?

Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 21, 2017, 10:27pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/19 "2017-11-21T22:27:10Z")

</div>

Sorry about that. That is a bug. I thought I had fixed when @lunatic brought it up, but I seem to have forgotten to publish the changes. It should be fixed now 🙂

For more context, in earlier versions of React, you could create components either by using the `class` syntax or by using `React.createClass()`. The latter approach has been deprecated in React 16, but I had only used the `createClass` approach because I liked how you could do mix-ins (extend the functionality of your component more easily) with it. Since this approach is deprecated, I went through and revised all of the code examples. I missed a few such as this one!

---

<div class="post-metadata">

**Author:** ![Rafic\_Jouejati](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rafic_jouejati/32/8817_2.png) [@Rafic\_Jouejati](https://forum.kirupa.com/u/Rafic_Jouejati)\
**Post date:** [December 7, 2017, 6:20pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/20 "2017-12-07T18:20:31Z")

</div>

Sir, you are a web development God sent from the heavens. Thank you for helping us mortals. Keep up the great work!

[Next page](https://forum.kirupa.com/t/styling-in-react/636204.md?page=2)