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

Question

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

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

异常：

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.

中的样式

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

How can I apply a style to a Bootstrap React element?

css

react-jsx

react-bootstrap