如果你使用的是React v16.8.0和Material-UI v3.5.0或更高版本，你可以使用useTheme()钩子：

import { useTheme } from '@material-ui/core/styles';

function LockIcon = () => {
  const theme = useTheme();

  return (
    <ActionLock color={theme.palette.primary1Color} />
}

是的，你有！使用多主题..

import muiThemeable from 'material-ui/styles/muiThemeable';
class LockIcon extends React.Component {
    render() {
        return(
            <ActionLock color={this.props.muiTheme.palette.primary1Color} />
        )
    }
}
        export default muiThemeable()(LockIcon)

从material-ui文档

在material-ui v1.0.0（目前是测试版）中添加如何使用withTheme组件访问主题颜色。
还检查以下Example。

import React, {Component} from 'react';
import { withTheme } from 'material-ui/styles';

class WithThemeExample extends Component {
    render() {
        const { theme } = props;
        const {primary, secondary} = theme.palette.text;

        return (
            <div>
                <div style={{color: primary}}>Hi in Primary color</div>
                <div style={{color: secondary}}>Bye in Secondary color</div>
            </div>
        );
    }
}

export default withTheme()(WithThemeExample);

如果你使用的是system properties，你可以定义一个Palette对象到颜色值的字符串路径，如下所示：

<Box sx={{ color: "primary.main" }}>primary.main</Box>
<Box sx={{ color: "secondary.main" }}>secondary.main</Box>
<Box sx={{ color: "error.main" }}>error.main</Box>
<Box sx={{ color: "warning.main" }}>warning.main</Box>
<Box sx={{ color: "info.main" }}>info.main</Box>
<Box sx={{ color: "success.main" }}>success.main</Box>
<Box sx={{ color: "text.primary" }}>text.primary</Box>
<Box sx={{ color: "text.secondary" }}>text.secondary</Box>
<Box sx={{ color: "text.disabled" }}>text.disabled</Box>

以上内容与以下内容相同：

<Box sx={{ color: theme => theme.palette.primary.main }}>primary.main</Box>
<Box sx={{ color: theme => theme.palette.secondary.main }}>secondary.main</Box>
<Box sx={{ color: theme => theme.palette.error.main }}>error.main</Box>
<Box sx={{ color: theme => theme.palette.warning.main }}>warning.main</Box>
<Box sx={{ color: theme => theme.palette.info.main }}>info.main</Box>
<Box sx={{ color: theme => theme.palette.success.main }}>success.main</Box>
<Box sx={{ color: theme => theme.palette.text.primary }}>text.primary</Box>
<Box sx={{ color: theme => theme.palette.text.secondary }}>text.secondary</Box>
<Box sx={{ color: theme => theme.palette.text.disabled }}>text.disabled</Box>

使用回调的示例更详细，但却是类型安全的，在原型设计时，仅使用字符串的较短示例更快，也更好，但您可能希望将字符串存储在常量中，以防止任何打字错误，并帮助IDE更好地重构代码。

现场演示

有了react hooks，现在你不需要在withTheme中扭曲组件，只需要使用useTheme：

import { useTheme } from '@material-ui/core/styles';

export default function MyComponent() {
    const theme = useTheme();
    
    return <span>{`spacing ${theme.spacing}`}</span>;
}

您可以使用useTheme（）钩子并访问颜色，如下例所示。也有一些其他的颜色变体。

梅5：

import * as React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from "react-router-dom";
import { useTheme } from "@mui/material/styles";

function VinNavLink(props) {
  const theme = useTheme();

  return (
    <NavLink {...props} style={({ isActive }) => isActive ? { textDecoration: "underline", color: theme.palette.primary.main} : undefined}>{props.children}</NavLink>
  );
}

export default VinNavLink;

如果你使用的material-ui版本大于4，那么上面的解决方案可能不适合你。按照下面的代码

import { withTheme } from '@material-ui/core/styles';

function DeepChildRaw(props) {
  return <span>{`spacing ${props.theme.spacing}`}</span>;
}

const DeepChild = withTheme(DeepChildRaw);

参考：https://material-ui.com/styles/advanced/

MUI V5

对于MUI v5的用户，您可以直接在sx css样式中指定函数，例如：

<Box sx={{ color: (theme) => theme.palette.primary1Color }} />

使用MUI 5和createTheme()函数，您可以通过传递一个函数作为typography值来引用ThemeOptions中的调色板。这个函数接受调色板作为它的第一个参数。
这使您可以轻松地Map各种hX和bodyX排版变体。

const theme = createTheme({
  palette: {
    primary: {
      main: "#2D3178",
    },
  },
  typography: (palette) => ({
    h1: {
      fontSize: "2rem",
      fontWeight: 700,
      color: palette.primary.main,
    },
  }),
});