Reactjs 反应：更改材质UI主题后，按钮不会更改其颜色

我想看到我包含的主按钮的颜色随着主题的改变而略有改变，但我做不到

如果我通过删除“variant=contained”将按钮从包含的按钮更改为文本按钮，我看到它是有效的，但我确实希望使用包含的按钮

有什么办法使它起作用吗

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  // Because of <React.StrictMode>, <CssBaseline /> didn't work when theme was changed.
  // <React.StrictMode>
  //   <App/>
  // </React.StrictMode>,
  <App />,
  document.getElementById('root')
);

---

这是因为Material UI提供的自动生成的深色主题只会更改调色板中的特定颜色。它不会更改primary.main或secondary.main颜色的主/次背景

从他们的网站上查看，该网站列出了自动生成的深色主题所改变的颜色。你会发现文本颜色是在主题改变时改变的颜色之一；这解释了为什么您可以在variant=text按钮中看到更改，但在variant=contained按钮中看不到更改

最好是在主题声明中为深色主题手动指定更改的颜色。比如：

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: "#000000" /*or whatever color you desire */
      }
    }
  })
);

---

这是因为Material UI提供的自动生成的深色主题只会更改调色板中的特定颜色。它不会更改primary.main或secondary.main颜色的主/次背景

从他们的网站上查看，该网站列出了自动生成的深色主题所改变的颜色。你会发现文本颜色是在主题改变时改变的颜色之一；这解释了为什么您可以在variant=text按钮中看到更改，但在variant=contained按钮中看不到更改

最好是在主题声明中为深色主题手动指定更改的颜色。比如：

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: "#000000" /*or whatever color you desire */
      }
    }
  })
);

---

谢谢你，@Arjun的回答。不过我还是很困惑。如果palette.type为“深色”，按钮不应跟随palette.primary.dark而不是palette.primary.main的颜色吗？如果没有，那么palete.primary.dark的用途是什么？@JasonKIM palete.primary.dark没有指定主题为暗时要使用的颜色。实际上，材质颜色的每个主色调都有明暗变体，可用于在某些UI功能中显示对比度：例如，您可以在最顶部的AppBar中使用主色调，在系统的bar中使用暗变体。从Material UI的网站上滚动到这篇文章的原色部分。@JasonKIM简言之，明暗色调与主题完全无关。材质UI不会自动更改主颜色和次主颜色。它只会改变文本颜色、纸张背景颜色等。希望这有帮助！非常感谢@Arjun。我慢慢地明白了。Jasnimi-Kim.如果它解决了你的问题，请考虑通过点击投票下方的记号来接受这个答案。谢谢谢谢你，@Arjun的回答。不过我还是很困惑。如果palette.type为“深色”，按钮不应跟随palette.primary.dark而不是palette.primary.main的颜色吗？如果没有，那么palete.primary.dark的用途是什么？@JasonKIM palete.primary.dark没有指定主题为暗时要使用的颜色。实际上，材质颜色的每个主色调都有明暗变体，可用于在某些UI功能中显示对比度：例如，您可以在最顶部的AppBar中使用主色调，在系统的bar中使用暗变体。从Material UI的网站上滚动到这篇文章的原色部分。@JasonKIM简言之，明暗色调与主题完全无关。材质UI不会自动更改主颜色和次主颜色。它只会改变文本颜色、纸张背景颜色等。希望这有帮助！非常感谢@Arjun。我慢慢地明白了。Jasnimi-Kim.如果它解决了你的问题，请考虑通过点击投票下方的记号来接受这个答案。谢谢

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: "#000000" /*or whatever color you desire */
      }
    }
  })
);