CODEWITHSUNDEEP
cssreactjszurb-foundation
user
user

Reputation: 545

React and foundation: can't use row class

I'm trying to use the foundation library in a ReactJs basic project. I installed the react-foundation and foundation-sites following this github project: https://github.com/digiaonline/react-foundation

Now the problem is i can't use the row class. Everywhere i go on the internet, in the foundation demos and documentation, i see the row class, but i have absolutely nothing for this clasd in my CSS. Instead of that, i have the grid-x, grid-y and other stuff. Is my foundation CSS incomplete?

Here's what i did exactly:

In my project i executed the commands npm install react-foundation --save and npm install foundation-sites --save. And in my index.js file i added this line import 'foundation-sites/dist/css/foundation.min.css';

In my app.js file, i have this code :

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

But when i inspect the div in Google Chrome, there's absolutely no CSS for the row class. When i use grid-x instead, i have some style.

What am i missing?

Thanks a lot

Upvotes: 0

Views: 854

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38807

As stated react-foundation documentation, the CSS class .row no longer exists in new versions of the foundation-sites CSS. Therefore adding className="row", will not have any effect whatsoever:

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.

This can be confirmed by review the content of 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 that do exist in the foundation-sites CSS.

Also keep in mind, use className instead of class in React.

Upvotes: 3

Related Questions