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    lt div id  splitter  className  k-content  gt     lt div id  vertical  gt       lt div gt         lt p gt Outer splitter   top pane  resizable and collapsible  lt  p gt       lt  div gt       lt div id  middlePane  gt         height         lt div id  horizontal  style  height  gt           lt div gt             lt p gt Inner splitter    left pane lt  p gt           lt  div gt           lt div gt             lt p gt Inner splitter    center pane lt  p gt           lt  div gt           lt div gt             lt p gt Inner splitter    right pane lt  p gt           lt  div gt         lt  div gt       lt  div gt     lt div gt     lt p gt Outer splitter   bottom pane  non-resizable  non-collapsible  lt  p gt   lt  div gt       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

User · Answer

Correct and more clear way is     lt div style    font-size     10px    height     100px    width     100     gt  My inline Style  lt  div gt    It is made more simple by following approach       JS const styleObject            font-size     10px          height     100px          width     100         HTML      lt div style  styleObject  gt  My inline Style  lt  div gt    Inline style attribute expects object  Hence its written in     and it becomes double      as one is for default react standards

User · Answer

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

User · Answer

You need to do this   var scope          splitterStyle             height  100             And then apply this styling to the required elements    lt div id  horizontal  style  splitterStyle  gt      In your code you are doing this  which is incorrect     lt div id  horizontal  style  height  gt    Where height   100

User · Answer

It s not immediately obvious from the documentation why the following does not work    lt span style  font-size  1 7  class  glyphicon glyphicon-remove-sign  gt  lt  span gt    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    lt span style   fontSize  1 7    em    className  glyphicon glyphicon-remove-sign  gt  lt  span gt

[javascript] Reactjs - setting inline styles correctly

Examples related to javascript

Examples related to html

Examples related to reactjs