如何将样式应用于Bootstrap React元素？ [英] How can I apply a style to a Bootstrap React element?

问题描述

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

The following is a line rendered inside a ReactJS Component for my application and saved as 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)

为什么会发生这种情况以及如何应用字体？

Why is this happening and how can I apply the font?

推荐答案

错误指出了解决方法：

未捕获的错误： style 道具需要从样式属性到值而不是字符串的映射。 例如，使用JSX时， style = {{marginRight：空格+'em'}} 。此DOM节点由 Nav 呈现。

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.

元素的code> style 属性期望一个对象具有与CSS属性及其值相对应的键和值：

The style prop for elements expects an object that has keys and values corresponding to CSS properties and their values:

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

请记住，属性键不能包含-和React camelCases的CSS属性名称，因此 font-family 变为 fontFamily 。

Remember that property keys cannot contain - and that React camelCases CSS property names, so font-family becomes fontFamily.

作为一个补充说明：我希望在JSX之外声明一个对象，所以它不是内联的，并且更有条理（我认为）。另一种方法是只使用CSS样式表，而不使用JavaScript中的样式。

As a side note: I would prefer an object declared outside the JSX, so that isn't inline and it's more organized (in my opinion). Another way would be just to use a CSS stylesheet instead of styles in JavaScript.

这篇关于如何将样式应用于Bootstrap React元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！