CODEWITHSUNDEEP
cssreactjs
gags
gags

Reputation: 355

No CSS applied to reactJs components

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

Upvotes: 0

Views: 1114

Answers (2)

Yangshun Tay
Yangshun Tay

Reputation: 53229

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

Upvotes: 2

finalfreq
finalfreq

Reputation: 6980

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

Upvotes: 1

Related Questions