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 understood things correctly, this can be implemented using an inline style

var style = {
  height: 100
}

However, I am also using Dustin Getz jsxutil to in an attempt to split things a part a bit more and have independent html fragments. Thus far I have the following html fragment (splitter.html)

<div id="splitter" className="k-content">
  <div id="vertical">
    <div>
      <p>Outer splitter : top pane (resizable and collapsible)</p>
    </div>
    <div id="middlePane">
      {height}
      <div id="horizontal" style={height}>
        <div>
          <p>Inner splitter :: left pane</p>
        </div>
        <div>
          <p>Inner splitter :: center pane</p>
        </div>
        <div>
          <p>Inner splitter :: right pane</p>
        </div>
      </div>
    </div>
  <div>
  <p>Outer splitter : bottom pane (non-resizable, non-collapsible)</p>
</div>

and a splitter.js component which references this html as follows

define(['react', 'external/react/js/jsxutil','text!internal/html/splitter.html'],
  function(React, jsxutil, splitterHtml) {
    'use strict';
    console.log('in app:' + splitterHtml);
    return React.createClass({

      render: function () {
        var scope = {
          height: 100
        };
        console.log('about to render:' + scope.height);

        var dom = jsxutil.exec(splitterHtml, scope);
        console.log('rendered:' + dom);
        return dom;
      }    
    });
  }
)

Now when I run this, I can see the height correctly if I put it as content. However, when it executes as the style properties I am getting an error

The `style` prop expects a mapping from style properties to values, not a string. 

So I obviously haven't quite got it mapped across correctly.

I'd be really grateful if someone could give me a steer on correcting this.

Answer 1

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 2

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

Answer 3

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 4

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.