CODEWITHSUNDEEP
cssreactjs
zac
zac

Reputation: 4918

Why my css class does not load?

I have header.js file like this:

import React, {Component} from 'react';
import Classes from '../css/style.css';

class Header extends Component {

    render() {

        return (
            <header>
                <div className={Classes.logo}>Logo</div>
            </header>
        )
    }
}

export default Header;

the problem the class name logo is not loaded, after inspect this in the browser the html appear like this:

<div>Logo</div>

why is that ?

Upvotes: 0

Views: 214

Answers (2)

OneCricketeer
OneCricketeer

Reputation: 192023

Using {Classes.logo} would imply you have some stateful object named Classes with a logo property

All you have is imported a CSS file, which has no dynamic state, therefore you only need a string of the classes to load on this tag

className="logo"

Where the CSS has 

.logo {}

Upvotes: 1

Andy Gaskell
Andy Gaskell

Reputation: 31761

I haven't seen CSS classes used this way in React before. Does this this work?

return (
    <header>
        <div className="logo">Logo</div>
    </header>
)

This assumes you have a .logo class in your style.css and your bundler is configured to handle CSS.

Upvotes: 1

Related Questions