易于使用es6模板字符串（允许换行）。在您的呈现方法中：

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

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

至于用例，我正在为一个div做这个，我正在使用一些复选框进行调试，我希望将其包含在一个文件中，以便稍后轻松删除。

JSX只是javascript的一个小的扩展，它不是自己的完整模板语言。所以你可以像javascript那样做：

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

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

http://jsfiddle.net/r6rqz068/
然而，绝对没有好的理由这样做。

内联样式最好直接应用于组件JSX模板：

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

演示：http://jsfiddle.net/chantastic/69z2wepo/329/

注意：JSX不支援样式属性的HTML语法

使用camelCase属性名称在中声明属性，例如：

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

进一步阅读：http://facebook.github.io/react/tips/inline-styles.html

这可以通过使用反勾号“”来完成，如下所示

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

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

“class”是JavaScript中的保留字。请改用“className”。
另外，你必须记住你使用的是JSX，而不是HTML。我不相信jsx会解析你的标签。一个更好的方法是用你的样式创建一个对象，然后将其作为样式应用（见下文）。

var styles = {
  color:"red";
}

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

1.创建一个函数来处理样式标记的插入。
1.将所需的CSS添加到字符串变量中。
1.将变量添加到<style>标记内返回的JSX中。

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

这就是我所做的：

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

经过敲击和试用终于得到了解决方案.关键是dangerouslySetInnerHTML.代码如下：

<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}}/>   
         )
         }

import styled from 'styled-components;

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

下一步：

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