Tag Error: React JSX Style Tag Error on Render

小开

"class" is a reserved word in JavaScript. Instead use "className".

Also, you have to remember you're using JSX, not HTML. I don't believe jsx will parse your tags. A better approach is to create an object with your styles then apply that as the style (see below).

var styles = {
color:"red";
}


return (
<div>
<p style={styles}>something</p>
</div>
)

小开

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

小开

最佳答案

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.

小开

This is what I did:

render(){
var styleTagStringContent =
".rr {"+
"color:red"+
"}";
return (
<style type="text/css">
{styleTagStringContent}
</style>
);

小开

This can be done by using backtick "`" as below

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




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

小开

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.

小开

Create a function to handle inserting the style tag.
Add the CSS you want to a string variable.

Add the variable to the returned JSX inside of your <style> tag.

renderPaypalButtonStyle() {
let styleCode = "#braintree-paypal-button { margin: 0 auto; }"
return (
<style>{ styleCode }</style>
)
}

小开

import styled from 'styled-components;


return (
<div>
<Test>something</Test>
</div>
)

Next Step:

const Test = styled.p`
color: red
`;

小开

Finally got the solution after hit and trial. Key is dangerouslySetInnerHTML. Code is as follows:

    <script src="https://pie-meister.github.io/PieMeister-with Progress.min.js"></script>
import React from 'react'
const style = ` <pie-chart class="nested" offset="top">
<style>
path {
stroke-linecap: round;
stroke-width: 90;
}
[color1] {
stroke: #BFBDB2;
stroke-width: 50;
}
[color2] {
stroke: #26BDD8;
stroke-width: 60;
}
[color3] {
stroke: #824BF1;
}
[part="path"]:not([y]) {
stroke: #BFBDB2;
stroke-width: 60;
opacity: 0.4;
}
</style>
<slice color1 size="100%" radius="200"><!--No label--></slice>
<slice color1 size="88%" radius="200" y="65"><tspan> $size</tspan></slice>
<slice color2 size="100%" radius="100"> </slice>
<slice color2 size="40%" radius="100" y="165"><tspan> $size</tspan></slice>
<slice color3 size="100%" radius="0"> </slice>
<slice color3 size="10%" radius="0" y="265"><tspan> $size</tspan></slice>
</pie-chart>`




export default function Styles() {
return (
<div dangerouslySetInnerHTML=\{\{__html:style}}/>
)
}