Reactjs - setting inline styles correctly

Question

I am trying to use Reactjs with a kendo splitter. The splitter has a style attribute like

style=\"height: 100%\"

With Reactjs, if I have un

Answer 1

It's not immediately obvious from the documentation why the following does not work:

<span style={font-size: 1.7} class="glyphicon glyphicon-remove-sign"></span>

But when doing it entirely inline:

• You need double curly brackets
• You don't need to put your values in quotes
• React will add some default if you omit "em"
• Remember to camelCase style names that have dashes in CSS - e.g. font-size becomes fontSize:
• class is className

The correct way looks like this:

<span style={{fontSize: 1.7 + "em"}} className="glyphicon glyphicon-remove-sign"></span>

Answer 2

You need to do this:

var scope = {
     splitterStyle: {
         height: 100
     }
};

And then apply this styling to the required elements:

<div id="horizontal" style={splitterStyle}>

---

In your code you are doing this (which is incorrect):

<div id="horizontal" style={height}>

Where height = 100.

Answer 3

Correct and more clear way is :

<div style={{"font-size" : "10px", "height" : "100px", "width" : "100%"}}> My inline Style </div>

It is made more simple by following approach :

// JS
const styleObject = {
      "font-size" : "10px",
      "height" : "100px",
      "width" : "100%"
}

// HTML    
<div style={styleObject}> My inline Style </div>

Inline style attribute expects object. Hence its written in {}, and it becomes double {{}} as one is for default react standards.

Answer 4

You could also try setting style inline without using a variable, like so:

style={{"height" : "100%"}} or,

for multiple attributes: style={{"height" : "100%", "width" : "50%"}}