Some CSS loaded into React app are not applied

react'; import css not working
react css
css is not working in react
react build css not working
create-react app
react global css
react css modules
react css stopped working

I'm building a react app with React Static Boilerplate.

Each component has a directory structure like this:

MyComponent/
-- MyComponent.css
-- MyComponent.js
-- package.json

and in the MyComponent.js file, I'm doing a raw import './MyComponent.css'

Let's say my CSS contains something like this:

body { background-color: orange; }
.card { background-color: purple; }

and the render function in my component renders a card:

render() {
  return (
    <div className="card">Hello World</div>
  );
}

The page's body will become orange, but the card will not become purple.

Why is this css not being fully applied to the HTML that is generated?

According to the React Static Boilerplate website, they use CSS Modules - this would explain why the body tag is being respected but the class selector is not.

https://github.com/css-modules/css-modules

try importing the stylesheet like so:

import styles from './MyComponent.css';

The using it in your component like so:

<div className={styles.card}>something!</div>

Css don't apply to react components � Issue #241 , index.scss file and written few react components included into app.js is wrong in the output file is why the .js and .css is not loading when� Is it some strange behaviour, or I have to include styles into every single react subcomponent? What I might be doying wrong? I was inspecting elements and no rules are applied to html elements, but they can be found in bundle.js. my folder structure looks something like this: ├── src │ ├── app.jsx │ ├── components

I had an issue with CSS not being applied, but it wasn't the modules, it ended up being the syntax of applying multiple classes. The syntax below solved the problem

<div className={[styles['col-sm-16'], styles['col-md-10'], styles['col-lg-8']].join(' ')}> some content </div>

9 Ways To Implement CSS in React JS | by Dmitry Nozhenko, Today I want to tell you about css in React app. So it was that styles are very look good without css. Many developers and companies do not pay enough attention to styles. use in your project. We are about to discuss some of them, let's begin How to optimize React applications with Lazy Loading. Create a new file called "App.css" and insert some CSS code in it: body { background-color: #282c34; color: white; padding: 40px; font-family: Arial; text-align: center; } Note: You can call the file whatever you like, just remember the correct file extension.

I came across an observation that typographical error was going undetected which is why it was not getting applied. Have a look at below HTML:

<div style={{display:"inline-block" ,position:"abosolute",right:"70px"}}>
</div>

Now when my page was getting rendered, the attributes display and right were getting applied but position attribute wasn't getting applied. For many hours I kept tried debugging it thinking that it was getting overridden somewhere.

Later on, I realised that the spelling of absolute had typographical error. But the Babel transpilation engine or developer tools in the browser was eating the error silently making things difficult for me to debug. I don't why transpilers or browsers doesn't complain in such a case.

Hope this information helps someone!

Adding a Stylesheet, This project setup uses [webpack](https://webpack.js.org/) for handling To express that a JavaScript file depends on a CSS file, you need to **import Post- Processing CSS � Adding Images, Fonts, and Files � Loading .graphql This is not required for React but many people find this feature convenient. A first read through your question makes it seem that your existing CSS isn't working when you 'React-ify' your webpage. It should. If it's not, there's something else going on that will need further diagnosing to fix. I recently rewrote one of my projects in React and continued to use the exact same CSS file and things worked great.

i know the reason why it is not getting applied. there must be somewhere in your webpack you have applied the localIndentName prop. This do the hashing of your className and hence the hashed classname gets injected to the tag by style-loader but in DOM , you have unhashed class loaded. This prop only hash the DOM classname when you use css-modules style.

 {
                test: /\.(sa|sc|c)ss$/,
                use: [
                  argv.mode =='development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                  {
                    loader: 'css-loader',
                    options: {
                    modules: true,//remove this or set to false
                    importLoaders: 1,
                    localIdentName: "[name]_[local]_[hash:base64:5]", //remove this 
                    }
                  },
                  'sass-loader'
                ]
            }

Importing CSS Files in React, So you ask me: “How to import CSS files in a React application?”. This is Finally, let's see how the renderOscars function is implemented: From their docs: “It moves all the required *.css modules in entry chunks into a separate CSS file. So, your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle.”

Integrating with Other Libraries – React, React can be used in any web application. but the same ideas can be applied to integrating components with any existing code. The <div /> element has no properties or children, so React has no reason to update it, leaving the jQuery Although React is commonly used at startup to load a single root React component� By Rick Anderson and Kirk Larkin. Static files, such as HTML, CSS, images, and JavaScript, are assets an ASP.NET Core app serves directly to clients by default. View or download sample code (how to download)

How To Render CSS on React App Servers, There are few common ways to write CSS in React which all work. Depending on your situation, you are applying styles to your React app in one of the following ways: It's common in the web ecosystem generally, not just React. Load. 0. piotr9433 June 4, 2020. Hello, I would like to notice that the� Choosing the right method for your use case is rather complex problem if you are page load time conscious, because you have to consider many aspects as a whole, such as, page load time, load environment (Browser, In-App browser, Chat platform Webviews…), CSS code spliting, Webpack, CommonsChunkPlugin, ExtractTextWebpackPlugin, CSS Tree

CSS not being applied in pages :/ - GitHub Pages, HTML is working, but CSS is not being applied. If any questions, let us know. 10 Likes or even entire css directory was never uploaded or pushed to the repository. Instructions on deploying a React app to GitHub Pages:. My site got some new colors and I updated the color code in my CSS file, but as usual it won't load in IE or Edge for some reason. I have cleared my cache in my site and browser. It's still not loading in the new color code. Do you have an idea of how to fix this? You are asking for details. så here is how my old css looked like.

Comments
  • Maybe add !important to the .card rule?
  • i tried, it doesn't even show up as seeing the css for .card at all.
  • Hmm. Have you got style-loader and css-loader installed and applied to webpack correctly? I would think so because the other CSS rule is applied but check to make sure. Also look into Developer Tools.
  • I just tried this and it does not work. Maybe it did in the past? Or is there more that needs to be done than what's in this answer?
  • It depends what the problem is - do you see an error? Or simply styles not being applies?
  • I think the problem was that the css file needs to be named foo.module.css where module is the name of the module into which it is imported. At least that's what fixed it for me (or maybe I have inadvertently changed something else that was causing it to fail but I believe the React website recommends the ....module.... naming scheme).