ませんCSSはreactJsコンポーネントに私のapp.jsで

Question

を適用：

[import React, {PropTypes} from 'react'; 
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; 
const TopHeader = (props) => { 
    return(
    <div> 
     <Navbar color="faded" light> 
     <NavbarBrand href="/">reactstrap</NavbarBrand> 
     <Nav className="pull-xs-right" navbar> 
      <NavItem> 
      <NavLink href="/components/">Components</NavLink> 
      </NavItem> 
      <NavItem> 
      <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink> 
      </NavItem> 
     </Nav> 
     </Navbar> 
    </div> 
); 
}][1] 

それは要素をレンダリングするが、任意のCSSなし。私はfirefoxとchromでこれを試しました。要素を調べると、CSSクラスはありません。私はカスタムCSSを持っていません。普通のHTML要素がCSSなしでレンダリングされる理由は何でしょうか？

編集：

示唆したように、私が追加しました：私のjsファイル内gommetコンポーネントの

import 'grommet/scss/vanilla/index'; 

を。

gommet scss file import error snapshot

編集：

と、このエラーを取得

ERROR in ./~/css-loader!./~/sass-loader!./~/grommet/scss/vanilla/index.scss 
Module build failed: 
@import "inuit-defaults/settings.defaults"; 
^ 
     File to import not found or unreadable: inuit-defaults/settings.defaults 
Parent style sheet: /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss 
     in /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1) 
@ ./~/grommet/scss/vanilla/index.scss 4:14-102 13:2-17:4 14:20-108 

Answer 1

Reactstrapのソースコードを見てみると、Reactstrapはあなたを助けブートストラップ4つの要素の上に抽象化のほんの薄い層でありますブートストラップ4のクラス名とスタイルに準拠するマークアップをレンダリングします。デフォルトではCSSは含まれていません。

ブートストラップ4のnpmパッケージをインストールするか、CDNホストされたCSSを使用して、ブートストラップ4 CSSを自分で組み込む必要があります。

あなたのプロジェクトのためのWebPACKを使用している場合は、インストールするバージョンと、このリポジトリにインポートする指示に私の例を参照することができます：あなたが唯一使用しているhttps://github.com/yangshun/react-redux-starter/blob/master/package.json#L46

Answer 2

ライブラリは、それはdoesnの、部品そのものを提供あなたのためにブートストラップCSSライブラリをインポートしないでください。ブートストラップ4 CSSスタイルシートを含める必要があります。

index.htmlをお持ちの場合は、これをドキュメントの先頭に追加してください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">