Struggling with CSS integration in ReactJS? That's the issue I've been facing while working on a project involving Rails and ReactJS. Despite implementing styles in my JSX files, nothing seems to change visually. Take a look at what my App.jsx file contains:
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>
);
}
}
In my accompanying styles.css file, the code looks like this:
.container {
width:40%;
text-align:right;
}
Despite using webpack as well, it seems like my CSS isn't being applied correctly on the JSX components. It has been quite a struggle trying to find a solution, even after searching for answers online. Could anyone shed some light on why the CSS styling is not reflecting in my React components?
As an additional reference point, here is how my "config/webpack/development.js" file is structured:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()