Reactjs 如何更改主材质UI的颜色

我有这样的主题：

export const Original = createMuiTheme({
palette: {
    type: 'light',
    primary: {
        light: '#b2dfdb',
        main: '#26a69a',
        dark: '#004d40',
    }
}
});

我用它来做这个：

<ListItem color = 'primary' button >
    <img src={APP} alt='' />
</ListItem>

---

如果您阅读了材料UI文档，我如何使用

主灯

或

主暗灯

用于

列表项

。你会知道

列表

&

列表项

没有

道具

颜色

。因此，为了让您添加一种或应用任何其他颜色，您可以执行以下操作：-

• App.js

  （需要：

  ThemeProvider

  和

  CreateMuiteme

  来自

  @material ui/core/styles

  ）

---

以下是您可以参考的工作。

那么如何将其用于类组件（演示组件）？您只需声明

const classes=useStyles（）&
const-theme=useTheme（）在
类中
组件
渲染
。除此之外，用法仍然是一样的。
import React from "react";
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import "./style.css";
import Demo from "./Demo";

export default function App() {
  const lightTheme = createMuiTheme({
    palette: {
      type: "light",
      primary: {
        light: "#b2dfdb",
        main: "#26a69a",
        dark: "#004d40"
      }
    }
  });

  return (
    <ThemeProvider theme={lightTheme}>
      <Demo />
    </ThemeProvider>
  );
}


import React from "react";
import { makeStyles, useTheme } from "@material-ui/styles";
import { List, ListItem } from "@material-ui/core";
import "./style.css";

const Demo = () => {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <>
      <List>
        <ListItem className={classes.listItem}>
          Using useStyles (classes)
        </ListItem>
        <ListItem style={{ color: theme.palette.primary.dark }}>
          Using inline direct theme
        </ListItem>
      </List>
      <List className={classes.list}>
        <ListItem>Having List control over all ListItem styles</ListItem>
      </List>
    </>
  );
};

export default Demo;

const useStyles = makeStyles(theme => ({
  listItem: {
    color: theme.palette.primary.light
  },
  list: {
    color: theme.palette.primary.main
  }
}));