Реагировать и основание: нельзя использовать класс строки - PullRequest
Новая
       4

Реагировать и основание: нельзя использовать класс строки

0 голосов
/ 05 ноября 2019

Я пытаюсь использовать фундаментальную библиотеку в базовом проекте ReactJ. После этого проекта github я установил реактивные и фундаментальные сайты: 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 в Google ChromeДля класса строки абсолютно нет CSS. Когда я использую grid-x вместо этого, у меня есть некоторый стиль.

Чего мне не хватает?

Большое спасибо

1 Ответ

1 голос
/ 05 ноября 2019

Как указано в документации Reaction-Foundation , класс CSS .row больше не существует в новых версиях foundation-sites CSS. Поэтому добавление className="row" не окажет никакого влияния:

Примечание. Более новые версии Foundation-сайтов не предлагают встроенную поддержку и компоненты. Если вы работаете с более новой версией, вместо нее следует использовать компоненты.

Это можно подтвердить, просмотрев содержимое dist / foundation.css . Вместо этого используйте компоненты, такие как Grid и / или Cell, как указано в документации для реактивного основания. Или вы можете явно использовать классы grid-x , которые существуют в CSS-сайтах Foundation.

Также имейте в виду, что в React используйте className вместо class.

Надеюсь, это поможет!

...