Question

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

现在的问题是我不能使用行类。在Internet上的任何地方，在基础演示和文档中，我都看到行类，但是在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时，该行类绝对没有CSS。当我改用grid-x时，我有一些风格。

我想念什么？

非常感谢

Answer 1

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

注意：基金会网站的较新版本不提供现成的功能支持和组件。如果使用较新的版本，而应使用组件。

这可以通过查看dist/foundation.css的内容来确认。而是使用文档中指定的Grid和/或Cell之类的组件来进行响应基础。或者，您显然可以使用基金会站点CSS中确实存在的类grid-x。

请记住，在React中使用className代替class。

希望有帮助！

React和Foundation：不能使用行类

1 个答案: