css - react 和基础 : can't use row class

Question

我正在尝试在 ReactJs 基础元素中使用基础库。我在这个 github 元素之后安装了 react-foundation 和 foundation-sites:https://github.com/digiaonline/react-foundation

现在的问题是我无法使用行类。在互联网上的任何地方，在基础演示和文档中，我都看到行类，但我的 CSS 中绝对没有这个类。取而代之的是，我有 grid-x、grid-y 和其他东西。我的基础 CSS 不完整吗？

这就是我所做的:

在我的元素中，我执行了命令 npm install react-foundation --save 和 npm install foundation-sites --save。在我的 index.js 文件中，我添加了这一行 import 'foundation-sites/dist/css/foundation.min.css';

在我的 app.js 文件中，我有这段代码:

class App extends React.Component {
  render() {
    return (
      <div class="row">
      </div>
    );
  }
}

但是当我在谷歌浏览器中检查 div 时，行类绝对没有 CSS。当我改用 grid-x 时，我有一些风格。

我错过了什么？

非常感谢

Answer 1

如前所述react-foundation文档中，CSS 类 .row 不再存在于 foundation-sites CSS 的新版本中。因此添加 className="row" 不会有任何效果:

Note: Newer versions of foundation-sites do not offer out of the box support for and components. If working with a newer version, and components should be used instead.

这可以通过查看 dist/foundation.css 的内容来确认。 .而是使用 react-foundation 文档中指定的 Grid 和/或 Cell 等组件。或者你显然可以使用类 grid-x确实存在于基础站点 CSS 中。

另外请记住，在 React 中使用 className 而不是 class。