應用於reactJs組件

在我app.js無CSS：應用於reactJs組件

[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的情況下呈現的原因是什麼？

編輯：

至於建議，我說：

import 'grommet/scss/vanilla/index';

爲gommet組件在我的js文件。

，並得到這個錯誤：

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

來源

2016-09-26 gags

如何將boostrap.css導入到您的項目中？看起來你沒有在任何地方加載樣式表 – finalfreq

綜觀Reactstrap的源代碼，Reactstrap是抽象的只是薄薄的一層在引導4個元素，可幫助您呈現符合Bootstrap 4類名稱和樣式的標記。它默認不包含任何CSS。

您必須通過安裝Bootstrap 4的npm軟件包或使用其CDN託管的CSS自行包含Bootstrap 4 CSS。

如果您使用的WebPack爲您的項目，你可以參考我的例子上的版本安裝在這個倉庫的進口說明：https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46

來源

2016-09-26 15:54:30

這是正確的。我相信它應該明確說明。我和grommet.github.io有完全一樣的問題。那裏可能會丟失什麼？ – gags

這可能是相同的原因。你必須明確地導入項目中的索環的css。如果你提供了一個鏈接到你的倉庫，我可以幫你看看。 –

Hey.Thanks。這裏：https://github.com/simran66/webocity – gags

你只使用該庫提供了自己，這不是組件爲你導入引導CSS庫。你需要包含bootstrap 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">

來源

2016-09-26 15:55:04 finalfreq

@ Thanks.https：//www.npmjs.com/browse/keyword/bootstrap%204哪npm我需要安裝bootstrap 4嗎？ – gags

如果你使用的是webpack，你可以參考以我的示例要安裝的版本和此存儲庫中的導入方法：https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46 –

應用於reactJs組件

回答

相關問題