时间戳

首页 > 解决方案 > 如何更改主 Material UI 的颜色

reactjs - 如何更改主 Material UI 的颜色

问题描述

我有这样的主题：

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

我用它来做这个：

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

我怎样才能使用primary-light或primary-darkListItem

标签： reactjsmaterial-ui

解决方案

如果您阅读 Material UI 文档。你会知道List&ListItem没有props color. 因此，为了让您根据需要添加一种或应用任何其他颜色，您可以执行以下操作：-

  • App.js（要求：ThemeProvider&createMuiTheme来自@material-ui/core/styles）
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>
  );
}
  • Demo.js（要求：makeStyles或'useTheme'来自@material-ui/stlyes）：-
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
  }
}));

以下是您可以参考的工作沙箱代码。

推荐阅读