如何在 ReactJS 中使用 Material-UI 更改图标的颜色？

在 Material-UI 中，图标通常是使用 Icon 组件渲染的。如果您想更改图标的颜色，可以通过以下两种方式来实现：

1. 使用内联样式

通过为 Icon 组件设置内联样式，您可以更改其颜色。以下是一个示例代码片段：

import React from 'react';
import { Icon } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  icon: {
    color: 'blue',
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <Icon className={classes.icon}>star</Icon>
  );
}

在上面的示例中，我们首先通过 makeStyles 函数定义了一个样式。然后我们在 Icon 组件上应用了该样式，并将图标的内容设置为 star。通过设置样式的 color 属性为蓝色，我们成功地更改了图标的颜色。

2. 使用主题

您也可以通过主题来更改 Material-UI 中图标的颜色。以下是一个示例代码片段：

import React from 'react';
import { Icon, createMuiTheme, ThemeProvider } from '@material-ui/core';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#0d47a1',
    },
  },
});

function MyComponent() {
  return (
    <ThemeProvider theme={theme}>
      <Icon color="primary">star</Icon>
    </ThemeProvider>
  );
}

在上面的示例中，我们首先通过 createMuiTheme 函数创建了一个主题。我们将 primary 调色板颜色设置为蓝色。然后，在 Icon 组件上通过将 color 属性设置为 primary，我们成功地更改了图标的颜色。

无论您选择哪种方法，都可以实现在 ReactJS 中使用 Material-UI 更改图标的颜色。