在 Reactjs 应用中更改 Material UI 边栏（抽屉）中的 link 颜色

Question

我尝试在边栏样式中使用不同的属性来覆盖 link 颜色，但没有任何效果。

边栏抽屉的默认 style/color（覆盖样式之前）

MySidebar.js

// MySidebar.js

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

const useSidebarStyles = makeStyles({
    drawerPaper: {        
        backgroundColor: '#0c2d48',
        color: '#fff',
    },
});

const MySidebar = props => {
    const classes = useSidebarStyles();
    return (
        <Sidebar classes={classes} {...props} />
    );
};

export default MySidebar;

MyLayout.js

// MyLayout.js

import React from 'react';
import { Layout } from 'react-admin';
import MySidebar from './MySidebar';

const MyLayout = props => (
    <Layout
        {...props}
        sidebar={MySidebar}
    />
);

export default MyLayout;

结果（覆盖MySidebar.js中的默认样式后）

如您所见，我可以更改侧边栏的背景颜色，但不能更改 link 颜色。

请帮忙。这让我发疯！

Answer 1

尝试更改 link 颜色。

drawerPaper: {        
        backgroundColor: '#0c2d48',
        color: '#fff',
    },
link: {
       color: '#fff',
     },

更新：通过查看输出侧栏上的检查元素，您可以给它取 css class 名称，而不是 link。

Answer 2

我可以看到您正在为边栏使用 React-Admin，而不是直接使用 Material UI 边栏。因此，React-Admin 模板可能修改了原始 material Ui 的 props，您应该查看 React admin 侧边栏并直接在那里修改它以获得结果。如果您在此应用 material UI 自定义，这可能是它不起作用的原因。

替代方法是尝试 Material UI 使用 ThemeProvider 设置主题并应用主题，这可以覆盖当前样式。

Answer 3

您可以按照此处所述创建自己的主题： https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme 并在您的主题中重新定义所有 MenuItemLink 组件的颜色：

export const lightTheme = {
  ...
  
  overrides: {      
    RaMenuItemLink: {
      root: {
        color: "#c51162",
      },
      active: {
        color: "#ff4081",
      },
    },
  },
}

在 Reactjs 应用中更改 Material UI 边栏（抽屉）中的 link 颜色

Change the link colors in Material UI Sidebar (Drawer) in a Reactjs app

reactjs

material-ui

react-admin