i am applying the below styles to the ListItemButton
component from MUI by specifically targetting the class .css-10hburv-MuiTypography-root
and it finely works in dev but in production it does n't, i have tried many things including applying it directly on the component instead of the class, please guys any how, how this thing is happening and how to fix it, thanks in advance.
here is my code for reference:
import {
Drawer,
Box,
Divider,
Typography,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Stack,
alpha,
useTheme,
Button,
} from "@mui/material";
import book3 from "@/assets/book3.png";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
import { ADMIN_SIDE_BAR_LIST_ONE, ADMIN_SIDE_BAR_LIST_TWO, DRAWER_WIDTH, OWNER_SIDE_BAR_LIST_ONE, OWNER_SIDE_BAR_LIST_TWO } from "@/constants/DrawerConstansts";
import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
import useLogOut from "../hooks/useLogOut";
import useAuth from "@/hooks/useAuth";
type SidebarProps = {
list1: typeof ADMIN_SIDE_BAR_LIST_ONE | typeof OWNER_SIDE_BAR_LIST_ONE,
list2: typeof ADMIN_SIDE_BAR_LIST_TWO | typeof OWNER_SIDE_BAR_LIST_TWO,
}
export default function Sidebar({list1, list2}: SidebarProps) {
const theme = useTheme();
const navigate = useNavigate();
const location = useLocation();
const { setAuth } = useAuth();
const logOut = useLogOut();
const mt = process.env.NODE_ENV === 'development' ? "177px" : 15;
const handleLogout = async () => {
await logOut();
navigate("/sign-in", {
state: { message: "You have logged out of your account!" },
});
setAuth({
id: "",
email: "",
fullName: "",
role: "",
accessToken: "",
});
};
return (
<Box>
<Drawer
sx={{
width: DRAWER_WIDTH,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: DRAWER_WIDTH,
height: "calc(100vh - 32px)",
boxSizing: "border-box",
bgcolor: "#171b36",
color: "white",
m: 2,
p: 2,
borderRadius: 4,
},
}}
variant="permanent"
>
<Stack direction={"row"} spacing={2} mb={4}>
<MenuOutlinedIcon sx={{ color: "white" }} />
<img src={book3} alt="opened book image" width={25} height={25} />
<Typography variant="subtitle1" color="#00ABFF">
Book Rent
</Typography>
</Stack>
<Divider color="#F8F8F8" sx={{ opacity: 0.4 }} />
<List>
{list1.map((list) => (
<ListItem key={list.text} disablePadding>
<ListItemButton
component={RouterLink} to={list.to}
sx={{
bgcolor: location.pathname === list.to? "primary.main": "inherit",
opacity: location.pathname === list.to? 1:"60%",
borderRadius: 1,
"& .css-10hburv-MuiTypography-root": {
fontSize: "14px",
fontWeight: 500,
lineHeight: "16.94px",
},
":hover": {
bgcolor: location.pathname === list.to ? "primary.main": alpha(theme.palette.primary.light, 0.2),
opacity: "100%",
},
}}
>
<ListItemIcon sx={{ color: "white" }}>{list.icon}</ListItemIcon>
<ListItemText primary={list.text} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider color="#F8F8F8" sx={{ opacity: 0.4 }} />
<List>
{list2.map((list) => (
<ListItem key={list.text} disablePadding>
<ListItemButton
component={RouterLink} to={list.to} state={{role: list?.role}}
sx={{
bgcolor: location.pathname === list.to? "primary.main": "inherit",
opacity: location.pathname === list.to? 1: "60%",
borderRadius: 1,
"& .css-10hburv-MuiTypography-root": {
fontSize: "14px",
fontWeight: 500,
lineHeight: "16.94px",
},
":hover": {
bgcolor: location.pathname === list.to ? "primary.main": alpha(theme.palette.primary.light, 0.2),
opacity: "100%",
},
}}
>
<ListItemIcon sx={{ color: "white" }}>{list.icon}</ListItemIcon>
<ListItemText primary={list.text} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider color="#F8F8F8" sx={{ opacity: 0.4 }} />
<Button
onClick={handleLogout}
sx={{
textTransform: "none",
bgcolor: alpha(theme.palette.grey[300], 0.2),
borderRadius: 1,
mt,
":hover": {
bgcolor: alpha(theme.palette.grey[300], 0.5),
},
}}
color="inherit"
startIcon={<LogoutOutlinedIcon color="inherit" />}
>
Logout
</Button>
</Drawer>
</Box>
);
}
I think the CSS classes are generated at build time. So when you're in the production environment, a new CSS class was generated for the Typography
children of the ListItemButton
. One way to get around this, is to target the MuiTypography
class directly, rather than the .css-[random-values]
that's prepended to the class. I have made adjustment to your ListItemButton
component:
<ListItem key={list.text} disablePadding>
<ListItemButton
component={RouterLink} to={list.to}
sx={{
bgcolor: location.pathname === list.to? "primary.main": "inherit",
opacity: location.pathname === list.to? 1:"60%",
borderRadius: 1,
"& .MuiTypography-root": {
fontSize: "14px",
fontWeight: 500,
lineHeight: "16.94px",
},
":hover": {
bgcolor: location.pathname === list.to ? "primary.main": alpha(theme.palette.primary.light, 0.2),
opacity: "100%",
},
}}
>
<ListItemIcon sx={{ color: "white" }}>{list.icon}</ListItemIcon>
<ListItemText primary={list.text} />
</ListItemButton>
</ListItem>
Hopefully, this fixes your issue.