更改材质 Ui 中所选项目的文本颜色

Question

我正在处理“React Most Wanted”项目，需要更改左侧菜单中所选项目的文本颜色。我设法通过设置“动作：{ 选择：'#11a8b8'， }," 在 themes.js 中。但是我无法找到任何通过配置或其他方式更改文本颜色的方法。

这是大多数菜单的构建位置，或者至少是我尝试更改的项目的构建位置： MenuContent.js：

import { useAddToHomeScreen } from 'base-shell/lib/providers/AddToHomeScreen';
import { useAuth } from 'base-shell/lib/providers/Auth';
import { useConfig } from 'base-shell/lib/providers/Config';
import { useLocale } from 'base-shell/lib/providers/Locale';
import MenuFooter from 'components/MenuFooter/MenuFooter';
import Scrollbar from 'material-ui-shell/lib/components/Scrollbar/Scrollbar';
import SelectableMenuList from 'material-ui-shell/lib/containers/SelectableMenuList';
import { useMenu } from 'material-ui-shell/lib/providers/Menu';
import { useTheme as useAppTheme } from 'material-ui-shell/lib/providers/Theme';
import React from 'react';
import { useIntl } from 'react-intl';
import { useHistory, useRouteMatch } from 'react-router-dom';
import getMenuItems from '../../config/menuItems';

const MenuContent = (props) => {
  const intl = useIntl();
  const history = useHistory();
  const match = useRouteMatch();
  const auth = useAuth();
  const menuContext = useMenu();
  const a2HSContext = useAddToHomeScreen();
  const { toggleThis, isMiniMode, isMiniSwitchVisibility } = menuContext || {};
  const { appConfig } = useConfig();
  const { setLocale, locale = 'en' } = useLocale();
  const themeContext = useAppTheme();

  const menuItems = getMenuItems({
    intl,
    locale,
    updateLocale: setLocale,
    menuContext,
    themeContext,
    appConfig,
    a2HSContext,
    auth,
    ...props,
  }).filter((item) => {
    return item.visible !== false;
  });

  const currentRoute = match ? match.path : '/';

  const handleChange = (event, index) => {
    if (index !== undefined) {
      toggleThis('isMobileMenuOpen', false);
    }
    if (index !== undefined && index !== Object(index)) {
      history.push(index);
    }
  };

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
      }}
    >
      <Scrollbar style={{ flex: 1 }}>
        <SelectableMenuList
          key={isMiniSwitchVisibility + themeContext.isRTL}
          onIndexChange={handleChange}
          useMinified={isMiniMode}
          items={menuItems}
          selectedItemStyle="red"
          index={currentRoute}
        />
        <MenuFooter />
      </Scrollbar>
    </div>
  );
};

export default MenuContent;

项目本身是来自 menuItems.js 的“menuItems”：

import {
  AccountBox as AccountBoxIcon,
  ExitToApp as ExitToAppIcon,
  GetApp,
  Lock as LockIcon,
} from '@material-ui/icons';
import FaceIcon from '@material-ui/icons/Face';
import ShoppingCartOutlinedIcon from '@material-ui/icons/ShoppingCartOutlined';
import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
import DashboardOutlinedIcon from '@material-ui/icons/DashboardOutlined';
import TimerOutlinedIcon from '@material-ui/icons/TimerOutlined';

import React from 'react';
import {
  IconReporting,
  IconKunden,
  IconLager,
  IconServicebereiche,
  IconVertragsverwaltung,
  IconKalender,
} from '../assets/icons';

const getMenuItems = (props) => {
  const { intl, menuContext, a2HSContext, auth: authData } = props;

  const { auth, setAuth } = authData;
  const isAuthorised = auth.isAuthenticated;
  const { isAuthMenuOpen } = menuContext;
  const { isAppInstallable, isAppInstalled, deferredPrompt } = a2HSContext;
  const menuColor = { color: '#8493ab' };

  if (isAuthMenuOpen || !isAuthorised) {
    return [
      {
        value: '/my_account',
        primaryText: intl.formatMessage({
          id: 'my_account',
          defaultMessage: 'My Account',
        }),
        leftIcon: <AccountBoxIcon />,
      },
      {
        value: '/signin',
        onClick: isAuthorised
          ? () => {
              setAuth({ isAuthenticated: false });
            }
          : () => {},
        visible: true,
        primaryText: isAuthorised
          ? intl.formatMessage({ id: 'sign_out' })
          : intl.formatMessage({ id: 'sign_in' }),
        leftIcon: isAuthorised ? <ExitToAppIcon /> : <LockIcon />,
      },
    ];
  }
  return [
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Dashboard',
      leftIcon: <DashboardOutlinedIcon style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Aufträge',
      leftIcon: <IconVertragsverwaltung style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Kalender',
      leftIcon: <IconKalender style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Zeiterfassung',
      leftIcon: <TimerOutlinedIcon style={menuColor} />,
    },
    {
      value: '/employeeList',
      visible: isAuthorised,
      primaryText: 'Mitarbeiter',
      leftIcon: <FaceIcon style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Kunden',
      leftIcon: <IconKunden style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Servicebereiche',
      leftIcon: <IconServicebereiche style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Artikel',
      leftIcon: <ShoppingCartOutlinedIcon style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Lager',
      leftIcon: <IconLager style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Auf- und Vertragsverwaltung',
      leftIcon: <IconVertragsverwaltung style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Dokumentation',
      leftIcon: <AssignmentOutlinedIcon style={menuColor} />,
    },
    {
      value: '/',
      visible: isAuthorised,
      primaryText: 'Reporting',
      leftIcon: <IconReporting style={menuColor} />,
    },
    {
      value: null,
      visible: isAppInstallable && !isAppInstalled,
      onClick: () => {
        deferredPrompt.prompt();
      },
      primaryText: intl.formatMessage({
        id: 'install',
        defaultMessage: 'Install',
      }),
      leftIcon: <GetApp />,
    },
  ];
};
export default getMenuItems;

我很高兴收到任何提示。作为前端开发的菜鸟，与 RMW 项目合作对我来说真的很痛苦。到目前为止，我在谷歌搜索时发现的大多数信息都没有丝毫帮助:-(