CODEWITHSUNDEEP
cssreactjswebpack
tee
tee

Reputation: 1336

CSS className isn't making any changes to Reactjs

I'm currently working with rails and reactjs. I'm having difficulties using css in my reactjs files. It seems like every time i try to use it, no change is being applied at all. In my App.jsx file I have this: 

import React from "react";
import styles from "./styles.css";

export default class Register extends React.Component {

  render() {
    return (
      <div className={styles.container}>
        <h1> this text should appear to the right </h1>
      </div>
   );
  }
}

And in my styles.css file I have this: 

.container {
    width:40%;
    text-align:right;
}

For the record I am using webpack. Can anyone help me understand why the css isn't having any effect on my jsx components. I've looked all over for help but was unable to put the pieces together.

If it matters, this is how my "config/webpack/development.js" file looks like:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

Upvotes: 1

Views: 1018

Answers (2)

Aprillion
Aprillion

Reputation: 22304

It depends on the webpack loader settings. If you are using css-loader as configured in react-scripts (as of 1.1.5), then the classNames are loaded using {modules: false} option, i.e. global styles, which can be referenced as strings in JSX code:

import "./styles.css";
... className="container" ...

Or you can load local styles using following CSS-file syntax:

:local .container {...

Or edit your webpack.config.js appropriately (see https://github.com/webpack-contrib/css-loader#scope for the official documentation of various options).

Upvotes: 1

Abdullah Ahmed
Abdullah Ahmed

Reputation: 43

seems like you didn't enable an option { modules: true } for css-loader in webpack config

take a look

webpack-contrib/sass-loader#206

https://github.com/webpack-contrib/css-loader#options

Taken from: https://github.com/facebook/create-react-app/issues/1350

Upvotes: 0

Related Questions