부트 스트랩 반응 요소에 스타일을 적용하려면 어떻게해야합니까?

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

오류 상태 :

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

그 속성을 기억 요소에 대한 style 소품은 키와 CSS 속성에 해당하는 값과 그 값을 가진 개체를 기대

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 .

키에는 -을 포함 할 수없고 해당 CamelCases 대응 CSS 속성 이름을 포함 할 수 있으므로 font-family은 fontFamily이됩니다. 보조 노트로

---

: 그 인라인되지 않고는 (제 생각에) 더 조직 그래서 나는의 JSX 외부에 선언 된 객체를 선호 할 것입니다. 또 다른 방법은 자바 스크립트에서 스타일 대신 CSS 스타일 시트를 사용하는 것입니다.