2017-03-17 78 views
0

以下是我的應用程序在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) 

這究竟是爲什麼以及如何我申請的字體?

回答

3

的錯誤狀態如何解決這一問題:

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樣式表而不是樣式。

相關問題