Search code examples
cssreactjscreate-react-app

Create-React-App: CSS custom classNames not loading properly in build version

I'm using create-react-app to build a personal website and I'm having some issues with how CSS is being read in the deployed version of the site.

Here is my project folder tree:
project folder tree

I have an App.css file containing the following .Text element:

.Text {
  background-color: white;
  color: black;
  padding: 20px;
  max-width: 600px;
  margin-bottom: 200px;
  border-radius: 20px;
  opacity: 80%;
  z-index: 1
}

Then, inside each component, I have an import '../App.css' and then use <div className="Text" id="componentName"> to wrap any text on the page.

When I run npm run start locally, I can see the text clearly rendered on a graphic background, as such: enter image description here

However, after running npm run build and opening the build locally, I see only the background image and no text.
I was able to make the text visible on the build version by deleting the .Text element in App.css, but I want to display the styling for those text elements.

Any advice on how to fix this issue would be greatly appreciated.

Solution

  • Import your App.css inside App.js only, you can use the classes in the components.