React not applying css styles

javascript html css node.js reactjs

12,038

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!

12,038

hidar

Updated on June 04, 2022

Comments

hidar almost 2 years

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

T.J. Crowder over 6 years

Please update your question with a runnable minimal reproducible example using Stack Snippets (the [<>] toolbar button) demonstrating the problem. Stack Snippets support React, including JSX; here's how to do one. There's nothing special about elements rendered by React in terms of how CSS is applied to them.
Kris Selbekk over 6 years

I thought bootstrap required you to add classes to your components?
T.J. Crowder over 6 years

@KrisSelbekk: It styles a lot without classes, but yes, you do indeed need classes for many of its features. For instance, hidar, for Bootstrap's nav stuff, you need class="nav" and class="nav-link" and class="nav-item" on various elements: getbootstrap.com/docs/4.0/components/navs
Dev over 6 years

import bootstrap.min.css in your main js file.
hidar over 6 years

@T.J.Crowder Updated, I couldn't get the concole working since it only asks the js, html, css fields but I have more than one .js file to include, but check after the UPDATE section I have clarified it
hidar over 6 years

@Dev Just tried that, still no style being applied to my nav
Mike Donkers over 6 years

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

I can't believe this, I have actually read about that but forgot. Still react throws me an error for every little thing but it can not check for this hmmm @Simplicity thank you so much
T.J. Crowder over 6 years

@hidar: "I couldn't get the concole working since it only asks the js, html, css fields but I have more than one .js file to include" Sure you could. That's where the Minimal part of MCVE comes in.

T.J. Crowder over 6 years

Something which there's zero good reason for, in 2017. As of ES5 (2009), it's perfectly valid to use a keyword as a literal property name. Even in 2011, when React first started, there's no reason they couldn't have handled class (rewriting it in the JSX layer for older browsers). It's really shocking it's still there tripping people up all these years later. Other frameworks using JSX manage to handle it just fine.
Mike Donkers over 6 years

@T.J.Crowder Don't shoot the messenger ^^" I don't understand it either, it should be easily captured as being an attribute... it is what it is I suppose
T.J. Crowder over 6 years

Oh, not shooting you. Just flagging up that it's asinine that this footgun is there, even more that it's still there. :-)
Alex over 6 years

There are polyfills available that allow you to use class aswell as className. It has been added to the application I am working on, but I am not sure how it was done (possibly webpack?)...
Mike Donkers over 6 years

@Alex well ofcourse there are, I'm sure they have been since the beginning of this issue, but it's surprising that it still is an issue.