Css 如何将样式应用于引导元素？

下面是在我的应用程序的ReactJS组件中呈现的一行，另存为

nav.jsx

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

---

发生这种情况的原因以及如何应用字体？

错误说明了如何解决此问题：

未捕获错误：

style

prop需要从样式属性到值的映射，而不是字符串例如，当使用JSX时，

style={{{marginRight:spating+'em'}}

。此DOM节点由

Nav

元素的

样式

属性要求对象具有与CSS属性及其值对应的键和值：

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

主页

请记住，属性键不能包含

-

，也不能包含CSS属性名，因此

font-family

将变为

font-family

---

---

作为旁注：我更喜欢在JSX之外声明的对象，因此它不是内联的，而且更有组织性（在我看来）。另一种方法是使用CSS样式表而不是JavaScript中的样式。

错误说明了如何修复此问题：

未捕获错误：

style

prop需要从样式属性到值的映射，而不是字符串例如，当使用JSX时，

style={{{marginRight:spating+'em'}}

。此DOM节点由

Nav

元素的

样式

属性要求对象具有与CSS属性及其值对应的键和值：

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

主页

请记住，属性键不能包含

-

，也不能包含CSS属性名，因此

font-family

将变为

font-family

---

作为旁注：我更喜欢在JSX之外声明的对象，因此它不是内联的，而且更有组织性（在我看来）。另一种方法是使用CSS样式表，而不是JavaScript中的样式