Question

在我的app.js中：

[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';

我的js文件中的gommet组件。

并收到此错误：

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只是Bootstrap 4元素的一个很薄的抽象层，可以帮助您呈现符合Bootstrap 4类名和样式的标记。默认情况下它不包含任何CSS。

您必须自己安装Bootstrap 4 CSS，方法是安装Bootstrap 4的npm软件包或使用他们的CDN托管的CSS。

如果您正在为项目使用Webpack，可以参考我要安装的版本的示例以及此存储库中的导入说明：https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46

Answer 2

您使用的库本身只提供组件，它不会为您导入bootstrap css库。您需要包含bootstrap 4 css样式表。

如果你有一个index.html，你可以在文档的头部添加它。

anchor

没有CSS应用于reactJs组件

2 个答案: