No CSS applied to reactJs components

Question

In my 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]

It renders the elements but without any CSS. I have tried this in firefox and chrom.When I go to inspect element, there aren't any CSS classes. I don't have any custom CSS either. What could be the reason for plain HTML elements getting rendered without any CSS?

Edit:

As suggested, I added :

import 'grommet/scss/vanilla/index';

for gommet components in my js file.

and get this error:

gommet scss file import error snapshot

Edit:

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

How are you importing the boostrap.css into your project? It looks like you dont have the stylesheet loading anywhere — finalfreq
– finalfreq, Commented Sep 26, 2016 at 15:49

Yangshun Tay · Accepted Answer · 2016-09-26 16:59:08Z

2

Looking at the source code of Reactstrap, Reactstrap is just a thin layer of abstraction over Bootstrap 4 elements that helps you render markup that conforms to Bootstrap 4 class names and styles. It does not include any CSS by default.

You will have to include Bootstrap 4 CSS on your own either by installing Bootstrap 4's npm package or using their CDN-hosted CSS.

If you are using Webpack for your project, you can refer to my example on the version to install and the importing instructions in this repository: https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46

edited Sep 26, 2016 at 16:59

answered Sep 26, 2016 at 15:54

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gags Over a year ago

That's correct. I believe it should be explicitly stated though. I have exactly the same problem with grommet.github.io. what could be missing there?

Yangshun Tay Over a year ago

It's probably the same reason. You have to explicitly import grommet's css in your project. If you provide a link to your repository I can help you have a look.

Yangshun Tay Over a year ago

While I'm at it, would you mind accepting this answer if it has helped you? (:

gags Over a year ago

Pushed the commit with the error that I get on importing scss file in my js file

Yangshun Tay Over a year ago

Ah I was having trouble running the project after installing the node_modules. Glad you solved it (:

finalfreq · Accepted Answer · 2016-09-26 15:55:04Z

1

The library you are using only provides the components themselves, it doesn't import the bootstrap css library for you. You would need to include bootstrap 4 css stylesheet.

If you have an index.html you can just add this in the head of the document.

<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">

answered Sep 26, 2016 at 15:55

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

2 Comments

gags Over a year ago

@Thanks.npmjs.com/browse/keyword/bootstrap%204 which npm do I need to install for bootstrap 4,please?

Yangshun Tay Over a year ago

If you are using webpack, you can refer to my example on the version to install and the importing approach in this repository: github.com/yangshun/react-redux-starter/blob/master/…

Collectives™ on Stack Overflow

No CSS applied to reactJs components

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related