What causes the discrepancy in CSS display between production and development environments in Material-UI?

Using material UI (verison: ^4.12.3) Select, with a customized input has led to an unexpected issue in the production environment. The Select input in prod has a black background and a :before element with a white background that I didn't intend to have.

I'm unsure where this styling is coming from, as it's not present in my development environment. Upon comparing the CSS & HTML of both environments' Select elements, I noticed that there is a ::before element added in the prod version but not in dev.

Additionally, the background color differs between the two versions. In prod, there is a supplementary class applied to the InputBase element which adds a black background color:

Edit 1

It appears that MUI injects <style>. In the production HTML code, I can see the unwanted styles such as background-color: black and the ::before element. Despite my attempts to apply inline styles to override these injected styles, I've faced difficulty especially with the ::before element. Is there a way to disable these injected styles or find a workaround?

This is image illustrating the injected bad css:

cssreactjsmaterial-uidevelopment-environmentproduction-environment

Answer №1

To find the solution to this issue, check out this thread. It was resolved by user Mordechai.

There seems to be a conflict between webpack and MUI's JSS rules... Adding an index of one to MUI's methods could resolve this problem.

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)

Answer №2

After encountering conflicts with classNames in Material-UI due to using micro-frontend infrastructure, we resolved the issue by adding a <StylesProvider /> wrapper to the app that had the conflicting makeStyles.

Within the root component <App/>:

import {
  StylesProvider,
  createGenerateClassName
} from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  seed: 'app1'
});

const App = () => {
 return (
    <StylesProvider generateClassName={generateClassName}>
       <OtherAppComponents />
    </StylesProvider>
)
}

To avoid conflicts, ensure each component has its own provider and generator by using different seeds for each.

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

Is it possible to pass hooks as a property value from a useEffect in React.js?

As a newcomer to React, I am struggling to grasp the concept of how to use useEffect effectively. In one of my components, I have an array of objects stored in a file named cardData.js. These objects are used to automatically create cards, each containing ...

javascriptreactjsreact-hooksundefined

Trouble with CSS styling arising when launching the MVC application on IIS

Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...

cssasp.net-mvciis

Error Encountered when Attempting to Retry AI SDK on Vercel's

I've been implementing code from the official AI SDK website but unfortunately, the code is not functioning properly. The error message I'm encountering is: RetryError [AI_RetryError]: Failed after 3 attempts. Last error: Failed to process error ...

javascriptreactjsnext.jsartificial-intelligencevercel

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

How can I update the style of my array-bars using componentDidMount()?

I created a visualization tool for sorting algorithms that displays vertical bars with varying heights and sorts them. The "Generate new Array" button triggers a function to generate a new array each time it's clicked, which is also used in the compon ...

javascripthtmlcssreactjs

The functionality of bootstrap.styl malfunctions during the parsing process in stylus

I am attempting to incorporate stylus, a css preprocessor, with twitter bootstrap version 2.04. Upon downloading boostrap, I execute the command "stylus --css < bootstrap.css > bootstrap.styl" to generate a bootstrap.styl file. However, upon trying t ...

cssnode.jstwitter-bootstrapexpressstylus

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

javascriptcssextjs

Having trouble installing @mui/styles with NPM for React 18?

I'm facing an issue while trying to integrate Material-UI Styles into a React project. When I execute the command in the terminal: npm i @mui/styles I encounter the following error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve ...

reactjsmaterial-ui

Identifying the active input using React hooks

Currently exploring React Hooks and trying to determine which input is currently in focus. I have a collection of inputs that are generated dynamically, and I would like to identify the selected one so that I can append a value to it upon button click. ...

javascriptreactjsdomreact-hooks

The issue of the footer kicking out of place in the HTML layout was successfully resolved after

I am in the process of creating a simple footer that will always stay at the bottom of the page. The content on the page will not exceed the screen size, eliminating the need for scrolling. (There are a total of 5 HTML pages, and I want the footer and head ...

htmlcssfooterfixed

Automatically change the state variable to open and close Mui's Backdrop when hovering over the speed dial

I am looking to incorporate Material UI's Backdrop and Speed dial component into my project. The final result should resemble this: https://i.sstatic.net/8coI3.png Below is a snippet of my code: const [open, setOpen] = React.useState(false); con ...

reactjsmaterial-ui

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

Encountering an error in the authentication call back page: TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in Next.JS. The issue occurs in src/app/auth-callback/page.tsx and here's the relevant code ...

reactjstypescriptauthenticationnext.jstrpc

Troubleshooting: Navbar Hover Effect in Tailwind CSS Not Functioning as Expected

This week, I've been working on building a navbar and it seems like the layout is coming together nicely. However, I've encountered a couple of small issues with the hover effect and the links for the menu items on the left and the logo in the ce ...

cssreactjsnext.jstailwind-css

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

htmlcssreactjsfontstailwind-css

What is the method to merge min and max validation errors when using React Hook Form?

<input {...register("subject", { maxLength: 50, minLength: 2, required: true, })} disabled={isLoading} id="subject" autoComplete=&q ...

reactjstypescriptnext.jsreact-hook-form

React | Error: Build file blank during compilation

I am currently in the process of constructing and deploying a React app. After executing the build, when I attempt to open the index.html file from the build folder [see attached screenshot], it opens as a blank page. I have also tried adding "homepage": ...

reactjs

Inconsistency in Firebase data updates

Hey there, my code snippet below is responsible for capturing latitude and longitude values through a drag-and-drop marker. Although the latitude and longitude are continuously updated in the console when I log them, the same doesn't seem to happen wh ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Tips on creating an inline editable cell in a Tree View

I've been working on a category tree that includes expand and collapse buttons. You can see what I have so far here: Category Tree Now, I'm looking to make each item inline editable. Can someone guide me on how to achieve this? If you want to t ...

javascriptreactjsmaterial-uidevexpress

Encountering a blank page with error on React production build

After successfully building my blog using React in development mode, I encountered a blank page error when deploying the production build to Netlify. Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf (<anonymous&g ...

reactjs