Tag Error: React JSX Style Tag Error on Render

Question

This is my react render function

render:function(){   return (     <div>       <p className="rr">something</p>       <style>         .rr{           color:red;         }       </style>     </div>       ) } 

This gives me this error

"JSX: Error: Parse Error: Line 22: Unexpected token :"

What's wrong here? Can I embed full normal css into a react component?

Answer 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.