CODEWITHSUNDEEP
javascripthtmlcssnode.jsreactjs
hidar
hidar

Reputation: 5939

React not applying css styles

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Nav from './blocks/Nav';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render( < App / > , document.getElementById('root'));
registerServiceWorker();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="my-app">
  </div>
</body>

</html>

I have a react app with boostrap.css included but the styles are not being applied to the elements for some reason. 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Nav from './blocks/Nav';

ReactDOM.render(<Nav />, document.getElementById('top-nav'));
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

I am trying to this file which contains page navigation and called /blocks/nav.js

   import React from 'react';

   export default class Nav extends React.Component {
    render() {
       return (
          <nav id='..'> </nav>
        )
      }
    }

I have included bootstrap.min.css in my index.html but the no style is being applied to the nav, if I however take the <nav id='..'> </nav> from the component and put it in my index.html then all styles get applied

UPDATE:

To clarify, this is my index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import Nav from './blocks/Nav';
    import 'bootstrap/dist/css/bootstrap.css';

    ReactDOM.render(<Nav />, document.getElementById('my-nav'));
    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

And this is my blocks/Nav.js

import React from 'react';


export default class Nav extends React.Component {
    render() {
    return (

<div id="top-nav" class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-toggle"></span>
      </button>
      <a class="navbar-brand" href="#">Dashboard</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">
          <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-user"></i> Admin <span class="caret"></span></a>
          <ul id="g-account-menu" class="dropdown-menu" role="menu">
            <li><a href="#">My Profile</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Logout</a></li>
      </ul>
    </div>
  </div>
</div>

)
    }
}

And this is my index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="my-nav"></div>
    <div id="root"></div>
  </body>
</html>

Now the problem is the nav bar displays without any styles unless I write the code in the index.html

Upvotes: 2

Views: 13124

Answers (1)

Mike Donkers
Mike Donkers

Reputation: 3689

the class attribute is invalid in React, this is because it is a reserved keyword, use className instead

in your blocks/Nav.js

import React from 'react';


export default class Nav extends React.Component {
    render() {
        return (

        <div id="top-nav" className="navbar navbar-inverse navbar-static-top">
            <div className="container">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span className="icon-toggle"></span>
                    </button>
                    <a className="navbar-brand" href="#">Dashboard</a>
                </div>
                <div className="navbar-collapse collapse">
                    <ul className="nav navbar-nav navbar-right">

                        <li className="dropdown">
                            <a className="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><i className="glyphicon glyphicon-user"></i> Admin <span className="caret"></span></a>
                            <ul id="g-account-menu" className="dropdown-menu" role="menu">
                                <li><a href="#">My Profile</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i className="glyphicon glyphicon-lock"></i> Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>

        )
    }
}

Hope this helps!

Upvotes: 10

Related Questions