className 未在 Gatsby 和 Bulma 中填充

Question

我正在尝试使用以下方法设置 div 的类名：

  render() {

    const textStyle = {
      position: "absolute",
      top: "200px",
      left: "200px"
    }

    return (
      <Layout>
        <div>
          <div>
            <div className={textStyle}> My text is Test</div>
          </div>
        </div>
      </Layout>
    )
  }
}

然而，当我检查时，我得到的是

<div class="[object Object]"> My text is Test</div>

我不确定为什么这不起作用。

我可以使用 Bulma 修饰符 OK

Answer 1

className 接收一个字符串，而不是一个对象

如果你想使用你的 textStyle 对象，使用这个：

<div style={textStyle}> My text is Test</div>

关于类名的更多信息：https://reactjs.org/docs/faq-styling.html

className 未在 Gatsby 和 Bulma 中填充

className not populated in Gatsby with Bulma

reactjs

gatsby

bulma