Tag Error: React JSX Style Tag Error on Render

Solution 1:

Easy to do with es6 template strings (which allows line breaks). In your render method:

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

As for use case I'm doing this for a div with some checkboxes that I'm using for debugging, that I would like to contain within one file for easy removal later.

Solution 2:

JSX is only a small extension to javascript, it's not its own full blown templating language. So you would do it like in javascript:

return (
  <div>
    <p className="rr">something</p>

      <style>{"\
        .rr{\
          color:red;\
        }\
      "}</style>
  </div>
)

http://jsfiddle.net/r6rqz068/

However there is absolutely no good reason to do this at all.

Solution 3:

Inline-styles are best applied directly to the component JSX template:

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

DEMO: http://jsfiddle.net/chantastic/69z2wepo/329/

Note: JSX does not support HTML syntax for the style attribute

Declare properties in using camelCase property names, e.g.,

{ color: "red", backgroundColor: "white" }

Further reading here: http://facebook.github.io/react/tips/inline-styles.html