React 和基础：不能使用行 class

Question

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

现在的问题是我无法使用行 class。我在互联网上的任何地方，在基础演示和文档中，我都看到行 class，但我在我的 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>
    );
  }
}

但是当我检查 Google Chrome 中的 div 时，class 行绝对没有 CSS。当我改用 grid-x 时，我有一些风格。

我错过了什么？

非常感谢

Answer 1

如 react-foundation 文档所述，CSS class .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.

这可以通过查看基金会站点 CSS 中确实存在的 dist/foundation.css. Instead use components like Grid and/or Cell as specified in the documentation for react-foundation. Or you can obviously use classes grid-x 的内容来确认。

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

React 和基础：不能使用行 class

React and foundation: can't use row class

css

zurb-foundation

reactjs