React css 仅在 IDE 刷新时正确呈现

Question

我有一些我不理解的意外 CSS 行为 - 任何人都可以帮助我了解它发生的原因，并帮助我正确导入 CSS 吗？

我有一个使用单个组件的 react 应用程序，它从单独的文件 brand.js 导入样式表。该组件有一个<Avatar className={classes.avatarTM}>； brand.js 将该类定义为具有深蓝色的背景颜色，这是我所期望的。

但是当我在 Chrome 中加载应用程序时，该头像加载为灰色，而不是蓝色。检查元素显示应用了两种样式：.makeStyles-avatarTM-11 与预期的 backgroundColor 为 primary.dark，以及 .MUIAvatar-colorDefault 与 backgroundColor #bdbdbd。 colorDefault 优先于 backgroundColor 而不是 avatarTM-11，所以我得到一个灰色头像。这不好。

如果我随后在 Visual Studio 中编辑 brand.js 中的 // deleteme 注释并保存文件，React 会在 Chrome 中以蓝色自动刷新头像。 avatarTM-11 现在优先于 colorDefault。

如果我在 Chrome 中重新加载页面，它会重新加载为默认灰色。

但真正搞砸了我修复错误的尝试是，如果我创建一个新文件 brand2.js，并复制/粘贴 brand.js 的确切内容> 到那个新文件中，然后修改 App2.js 和 testComponent.js 中的导入以导入 brand2 而不是 brand em>，它工作得很好。 avatarTM-11 现在无论加载什么页面都优先于默认值，并且我得到一个蓝色头像。

所以只需使用 brand2 而不是 brand，对吗？对。所以我删除了 brand.js.... 问题又回来了。

这里到底发生了什么？如何让我定义的 avatarTM 样式始终优先，无论加载页面或调用什么样式表？为什么应用程序未使用的文件的存在或不存在会影响任何事情？

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>
    )}

品牌.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

您可以尝试强制这种样式放置属性，如下所示：

avatarTM: {
    backgroundColor: 'theme.palette.primary.dark !important'
},