CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

Question

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

I am attempting to override the CSS of Muidrawer-paper. It works locally after running "npm start", but it does not take effect when building the package.

.css-12i7wg6-MuiPaper-root-MuiDrawer-paper {
    position: absolute !important;
    top: 50px !important;
    outline: 0;
    left: 10px !important;
    max-width: 35px;
    padding-right: 35px !important;
    background: color-mix(in srgb, #D8D8D8, transparent 18%) !important;
}

Locally:

CSS takes effect.

After building the package:

The CSS is not being applied.

Why isn't my CSS taking effect in the build package?

The CSS should remain consistent both locally and in the build package when the React application is running.

Header.js

...

Header.css

...

App.js:

...

App.css:

...

css reactjs material-ui

Answer 1

Answer №1

When you compile your React application for production, Material UI automatically alters all class names and compresses your code. This is why any customized CSS styles you apply may not work since the classes are modified or removed in the production build.

The recommended method for customizing MUI components involves creating a theme and implementing it at the root level or adding inline styles. While both approaches can be utilized, I will provide an example using inline styles as it is easier to understand before diving deep into MUI customization.

To adjust the styling of the paper component within the Drawer, you must include the PaperProps prop in the drawer element. Here's an illustration of how this can be achieved:

An excerpt from your Header.js Code (Modified)

return (
  <Box sx={{ display: 'flex' }}>
    <AppBar position="fixed" color="default" >
      <Toolbar variant="dense">
      </Toolbar>
    </AppBar>
    <Drawer 
      variant="permanent" 
      open={open}
      PaperProps={{
         sx: {
            position: "absolute !important",
            top: "50px !important",
            outline: 0,
            left: "10px !important",
            maxWidth: "35px",
            paddingRight: "35px !important",
            background: "color-mix(in srgb, #D8D8D8, transparent 18 %) !important"
         }
      }}
    >
      <List>
        {[
          "Home",
          "Layers",
        ].map((text, index) => (
          <ListItem key={text} disablePadding sx={{ display: "block" }}>
            <ListItemButton
              sx={{
                minHeight: 48,
                justifyContent: open ? 'initial' : 'center',
                px: 2.5,
              }}
            >
              <ListItemIcon
                sx={{
                  minWidth: 0,
                  mr: open ? 3 : 'auto',
                  justifyContent: 'center',
                }}
              >
                <Tooltip title="Home">
                  {index === 0 ? <HomeIcon /> : null}
                </Tooltip>
                <Tooltip title="Layers">
                  {index === 1 ? <LayersIcon /> : null}
                </Tooltip>
              </ListItemIcon>
              <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Drawer>
  </Box>
);

Answer 2

When you compile your React application for production, Material UI automatically alters all class names and compresses your code. This is why any customized CSS styles you apply may not work since the classes are modified or removed in the production build.

The recommended method for customizing MUI components involves creating a theme and implementing it at the root level or adding inline styles. While both approaches can be utilized, I will provide an example using inline styles as it is easier to understand before diving deep into MUI customization.

To adjust the styling of the paper component within the Drawer, you must include the PaperProps prop in the drawer element. Here's an illustration of how this can be achieved:

An excerpt from your Header.js Code (Modified)

return (
  <Box sx={{ display: 'flex' }}>
    <AppBar position="fixed" color="default" >
      <Toolbar variant="dense">
      </Toolbar>
    </AppBar>
    <Drawer 
      variant="permanent" 
      open={open}
      PaperProps={{
         sx: {
            position: "absolute !important",
            top: "50px !important",
            outline: 0,
            left: "10px !important",
            maxWidth: "35px",
            paddingRight: "35px !important",
            background: "color-mix(in srgb, #D8D8D8, transparent 18 %) !important"
         }
      }}
    >
      <List>
        {[
          "Home",
          "Layers",
        ].map((text, index) => (
          <ListItem key={text} disablePadding sx={{ display: "block" }}>
            <ListItemButton
              sx={{
                minHeight: 48,
                justifyContent: open ? 'initial' : 'center',
                px: 2.5,
              }}
            >
              <ListItemIcon
                sx={{
                  minWidth: 0,
                  mr: open ? 3 : 'auto',
                  justifyContent: 'center',
                }}
              >
                <Tooltip title="Home">
                  {index === 0 ? <HomeIcon /> : null}
                </Tooltip>
                <Tooltip title="Layers">
                  {index === 1 ? <LayersIcon /> : null}
                </Tooltip>
              </ListItemIcon>
              <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Drawer>
  </Box>
);

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

Answer №1

Similar questions

Modify the directory (app) within the Next.js app router

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

Upgrading to React Router v6: Implementing Loader Functions with Context API

Issue: Unable to authenticate the initial certificate following the configuration of an id_rsa

What is the best way to show an element when hovering over another element?

Exploring the World of React Variables

image in the background following the header

Can you provide guidance on how to pass props to a component through a prop in React when using TypeScript?

I'm looking to keep the footer anchored at the bottom without using the absolute positioning

How to ensure that a React Material-UI Fab Button remains fixed in a specific position on the screen

Adjust text to fit within a specified height container automatically

The usage of the enzyme shallow() function combined with the addition of event listeners

Struggling to update state using useState in ReactJS - value remains unchanged

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

What is the best way to create a JavaScript function that can be used for multiple expandable cards in HTML and CSS?

React Checkbox Sum Component - Effortlessly Improve User Experience

Aligning icons and text vertically in a list

Whenever I try to log in using axios and my credentials are incorrect, I don't receive any response back in the catch block

Is there a way to globally modify the styling of all Material UI Typography components within a single React component without having to individually apply a class to each element

The React component designed to consistently render video frames onto a canvas is unfortunately incompatible with iOS devices