React css renders correctly only on IDE refresh - css

Question

I have some unexpected CSS behaviour that I don't understand - can anyone help me understand why it's happening, and help me get my CSS imports right?
I have a react app that uses a single component, that imports a stylesheet from a separate file brand.js. The component has an <Avatar className={classes.avatarTM}>; brand.js defines that class as having a backgroundColour of Dark Blue, which is what I'm expecting.
But when I load the app in Chrome, that avatar loads grey, not blue. Inspecting the element shows that two styles apply: .makeStyles-avatarTM-11 with the expected backgroundColor of primary.dark, and .MUIAvatar-colorDefault with backgroundColor #bdbdbd. colorDefault takes precedence on backgroundColor over avatarTM-11, so I get a grey avatar. This is not good.
If I then edit the // deleteme comment in brand.js in Visual Studio and save the file, React auto-refreshes the avatar in Chrome in Blue. avatarTM-11 is now taking precedence over colorDefault.
If I then reload the page in Chrome, it reloads as default grey.
But the bit that really screws up my attempts at bugfixing is that if I create a new file brand2.js, and copy/paste the exact content of brand.js into that new file, then modify the imports in App2.js and testComponent.js to import brand2 instead of brand, it works just fine. avatarTM-11 now takes precedence over default no matter what loads the page, and I get a blue avatar.
So just use brand2 instead of brand, right? Right. So I delete brand.js.... and the problem comes back.
What exactly is happening here? How do I get my defined avatarTM style to always take precedence, no matter what is loading the page or what the stylesheet is called? Why should the presence or absence of a file that is not being used by the app affect anything?
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 }

Answer 1

You can try force this style putting property like this:
avatarTM: {
backgroundColor: 'theme.palette.primary.dark !important'
},