In the production and development environments, the interpretation of CSS classnames is being rearranged

Currently utilizing create-react-app v2.

I've encountered an issue with a component that has multiple classnames: "x15 x14 login-form__field". Strangely, in the production build, the order of '.x14' and 'login-form__field' seems to be reversed compared to development. Any insights on why this might be happening? I am aware that webpack performs hoisting and post-processing tasks, but am unsure how it could lead to this discrepancy.

https://i.sstatic.net/USFrs.png

https://i.sstatic.net/wycod.pnghttps://i.sstatic.net/vCtmT.png

Cheers

-- Update --

Upon closer inspection, I have noticed that the custom class is being injected as an inline style, giving it higher priority. It appears that webpack may be responsible for this behavior. Is there a way to instruct webpack/CRA to inject stylesheets instead of inline styles? Otherwise, the styling may not accurately reflect what is seen in production.

-- Second Update --

In the case of create-react-app, 'styleLoader' is used for injecting inline-styles during development for hot reloading, while CSS files are generated only for production builds. This choice seems logical considering the nature of these two environments.

cssreactjswebpacksasscreate-react-app

Answer №1

When using create-react-app, the 'styleLoader' is utilized for inline styles during development to enable hot reloading, while CSS files are generated for production builds only.

Answer №2

When working with css modules in your project, you may encounter a situation where using 'composes' within your classes can cause unexpected issues. Specifically, if you are utilizing composes to inherit properties from another class located in a different file, the ordering of these classes may not behave as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating external information with components

Currently in my React application, I am fetching a list of stores by directly calling the API through the URL. const getStore = async () => { try { const response = axios.get( 'http://localhost:3001/appointment-setup/storeList& ...

javascriptreactjs

In a Next.js project, Typescript seems to be overlooking errors related to proptype definitions and function types

Greetings everyone! I am currently working on a project using TypeScript and have implemented various rules and elements. However, I am facing issues with type errors for functions and props. Essentially, when using any function, it is necessary to specify ...

javascriptreactjstypescriptnext.js

Exploring JavaScript: Accessing an array object within another object

I'm having trouble accessing an array object within an object in JavaScript. The object structure is as follows: categories: Array(5) 0: name: "Electronics" subCategories: Array(16) 0: name: "Video Games & Accessories" __typena ...

javascriptarraysreactjs

Have you ever created a CSS class that you've had to reuse multiple times?

They always told me to consolidate repeated properties in CSS into one rule, like the example below (please forgive the poor example). I typically see this: .button, .list, .items { color: #444; } Having multiple rules like this can create a lot of clut ...

css

tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in ...

javascriptjqueryhtmlcssapi

Align component within material-ui grid

Looking to center align the same cards but not just the grid component, I need the content itself to be equally distant from the borders and each other. I've searched and tried different solutions without luck. https://i.stack.imgur.com/aZj7H.png htt ...

javascriptcssreactjsmaterial-ui

Is there a way to make the first Image Element within the div automatically clickable?

Is there a way to set the first image in a div as the default clicked element? I have a div with multiple images and I want the first one to be clicked by default. This is part of a React functional component that serves as a view. <div className=&quo ...

javascripthtmlreactjsreact-hooks

Is there a way to display the button just once in a map function while still retaining access to the iteration value?

Utilizing formik within material-ui for a form has been quite productive. I've implemented a map function to print text fields and managed to display the Submit button only once by targeting the index. However, there's an issue when attempting to ...

javascriptreactjsdata-structuresmaterial-ui

Is there a way to change the background color of product blocks on Shopify in a dynamic

Is there a way to customize the background colors of product blocks on Shopify by modifying the shop code? Take a look at this example: Mockup showing alternating block backgrounds Currently, all product blocks in the grid have a black background with wh ...

htmlcssshopify

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

phphtmlcssajaxforms

Endless loop of React Bootstrap elements

After installing react-bootstrap version 5.1.3, my app was functioning normally. However, the trouble started when I tried copying and pasting a specific component, causing the app to get stuck in an infinite loop. Surprisingly, the terminal application co ...

reactjsreact-bootstrap

What is the process for converting a hexadecimal color to rgba when using the Less compiler?

Here's the code snippet I'm working with: @shade : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, ri ...

cssless

Caching of audio files in React streaming is enabled

My dilemma lies in the fact that despite creating a new file in the back-end, the <PlaySound /> component continues to play the old sound file rather than the updated one. Although the sound file maintains the same name and path, its content differs. ...

javascriptnode.jsreactjsexpress

Is there a way to enhance the height of Bootstrap combobox items? Can this be achieved?

Is it possible to improve the height of Bootstrap combobox item? How can I achieve that?https://i.sstatic.net/MkGFd.jpg 1 2 3 4 ...

jqueryhtmlcss

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

javascriptjqueryhtmlcss

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

jqueryhtmlcss

Creating blurred and colored shadows in React Native Android within a view is a straightforward process

After numerous attempts, I found myself struggling to design attractive and modern components in React Native for Android. My goal is to achieve something similar to what is shown here: https://i.sstatic.net/oP8Dn.png However, the only attribute that see ...

androidreactjsreact-nativeshadowdropshadow

Tips for selecting a specific input field in a ReactJS component with multiple inputs

I am currently developing a ReactJS application where I have implemented a component responsible for generating an HTML table. Within this component, I utilize Map to create rows using a child component. These rows contain multiple input fields that users ...

javascriptreactjsfocus

Issues arise when attempting to insert data into an HTML file using PHP

Good evening, I am having a problem where when I attempt to use PHP to replace "hello world" in an HTML file, it ends up completely empty each time. Can anyone point out what mistake I might be making? Here are the HTML and PHP files: <!DOCTYPE html&g ...

phphtmlcss

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

javascriptjquerycsscustom-data-attribute