Can anyone assist me with understanding this unexpected behavior in my CSS? I'm struggling to figure out why it's happening and how to correct the CSS imports.
In my react app, there is a single component that imports a stylesheet from a separate file called brand.js. The component includes an
<Avatar className={classes.avatarTM}>However, when I view the app in Chrome, the avatar displays as grey instead of blue. Upon inspecting the element, I notice two styles being applied: .makeStyles-avatarTM-11 with the expected backgroundColor of primary.dark, and .MUIAvatar-colorDefault with a backgroundColor of #bdbdbd. Unfortunately, colorDefault takes precedence over avatarTM-11, resulting in a grey avatar, which is not what I want.
Interestingly, if I update the // deleteme comment in brand.js using Visual Studio and save the file, React automatically refreshes the avatar in Chrome displaying the correct blue color. Now, avatarTM-11 is given priority over colorDefault.
However, upon reloading the page in Chrome, it reverts back to the default grey color.
The confusing aspect arises when I create a new file named brand2.js, copy the exact content of brand.js into this new file, and then modify the imports in App2.js and testComponent.js to refer to brand2 instead of brand. Surprisingly, this resolves the issue - now avatarTM-11 consistently takes precedence over the default style, regardless of what loads the page, resulting in a blue avatar.
So, should I just use brand2 instead of brand? Yes. But as soon as I delete brand.js, the problem resurfaces.
I am left puzzled by what exactly is happening here. How can I ensure that my defined avatarTM style always prevails, regardless of external factors such as the loading mechanism or the name of the stylesheet being used? Why does the presence or absence of an unused file impact the avatar's appearance?
app2.js:
import React from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import { theme } from './components/Brand';
import TestComponent from './components/testComponent';
export default function App() {
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<TestComponent />
</ThemeProvider>
</React.Fragment>
);
}
testComponent.js:
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import { useStyles } from './Brand';
export default function TestComponent() {
const classes = useStyles();
return (
<Card className={classes.card} variant="outlined">
<CardHeader
avatar={
<Avatar aria-label="testComponent" className={classes.avatarTM}>
t
</Avatar>
}
title="testComponent"
/>
</Card>
)}
brand.js:
import { createMuiTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#014EAA',
contrastText: '#ffffff',
},
secondary: {
main: '#0099CC',
contrastText: '#ffffff',
},
info: {
main: '#666666',
contrastText: '#ffffff',
},
error: {
main: '#FF6600',
contrastText: '#ffffff',
},
success: {
main: '#339933',
contrastText: '#ffffff',
},
},
});
// deleteme
const useStyles = makeStyles(theme => ({
root: {
color: theme.palette.primary,
fontSize: 10,
padding: '6px 12px',
fontFamily: ['sans-serif']
},
card: {
minwidth: 275,
},
title: {
fontSize: 24
},
cardTitle: {
fontSize: 24,
color: theme.palette.primary.main,
},
cardSubtitle: {
fontSize: 14,
color: theme.palette.secondary.main
},
cardDescription: {
fontSize: 10,
},
avatarTM: {
backgroundColor: theme.palette.primary.dark
},
avatarUnknown: {
backgroundColor: theme.palette.warning.main
},
avatarFixed: {
backgroundColor: theme.palette.primary.light
},
}));
export { theme, useStyles }