css - 如何将样式应用于 Bootstrap React 元素？

Question

以下是为我的应用程序在 ReactJS 组件内呈现的一行，并保存为 nav.jsx。

<span style="font-family: 'Open Sans', sans-serif;">&nbsp;Home</span>

异常(exception):

Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `Nav`.
    at invariant (react.js:18354)
    at assertValidProps (react.js:6435)
    at ReactDOMComponent.mountComponent (react.js:6678)
    at Object.mountComponent (react.js:12978)
    at ReactDOMComponent.mountChildren (react.js:11692)
    at ReactDOMComponent._createContentMarkup (react.js:6815)
    at ReactDOMComponent.mountComponent (react.js:6703)
    at Object.mountComponent (react.js:12978)
    at ReactDOMComponent.mountChildren (react.js:11692)
    at ReactDOMComponent._createContentMarkup (react.js:6815)

为什么会这样，我该如何应用字体？

Answer 1

错误说明了如何解决这个问题:

Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Nav.

元素的 style 属性需要一个对象，该对象具有与 CSS 属性及其值相对应的键和值:

<span style={{fontFamily: "'Open Sans', 'sans-serif'"}}>&nbsp;Home</span>

请记住，属性键不能包含 - 并且 React camelCases CSS 属性名称，因此 font-family 变为 fontFamily。

---

作为旁注:我更喜欢在 JSX 外部声明的对象，这样它就不是内联的，而且更有条理(在我看来)。另一种方法是使用 CSS 样式表而不是 JavaScript 中的样式。