有没有办法用React创建<style>对象？

Question

在一次采访中，我被问到是否可以进行以下操作（是吗？）： 有没有办法用ReactJS创建一个<style>组件。
如果我在dom检查器中对其进行检查，则该组件将显示为（例如）：

<style>
body:{ color:red;}
</style>

Answer 1

是的，您可以这样做

<style>
    {`p {display: block}`}
</style>

注意反引号

希望这会有所帮助

Answer 2

是的，可以。

React.createElement("style", null, "body:{ color:red;}");

或仅添加

function MyStyle(){ 
    return (
        <style>
            {` body:{ color:red;} `}
        </style>
    )
}

编辑：

如Shmili Breuer在另一个答案中所述，反引号`非常重要。

为什么？因为如果您不使用它，则react会认为{}是一个块作用域，而不是文字字符串。

Answer 3

可以，但是首选方法是将样式放在名为style的属性上。例如：

<div style={styles.container}></div>

const styles = {
  container: {
    color: 'red',
  },
};