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

问题描述：

以下是我的应用程序在ReactJS组件内呈现的一行，并保存为nav.jsx。如何将样式应用于Bootstrap React元素？

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

这究竟是为什么以及如何我申请的字体？

答

的错误状态如何解决这一问题：

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之外声明一个对象，这样它就不是内联的，而是更有组织的（在我看来）。另一种方法是在JavaScript中使用CSS样式表而不是样式。

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

相关推荐