在Reactjs应用程序中更改资料UI侧边栏(抽屉)中的链接颜色
在Reactjs应用程序中更改资料UI侧边栏(抽屉)中的链接颜色
提问于 2020-12-03 06:14:16
我尝试在侧栏样式中使用不同的属性来覆盖链接颜色，但是没有任何效果。
默认样式/边栏抽屉颜色(在重写样式之前)
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中覆盖默认样式之后)
如您所见，我可以更改边栏的bg颜色，但不能更改链接颜色。
请帮帮忙。快把我逼疯了！
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-03 08:47:49
您可以创建您自己的主题，如下所述：https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme和在主题中重新定义所有MenuItemLink组件的颜色：
export const lightTheme = {
...
overrides: {
RaMenuItemLink: {
root: {
color: "#c51162",
},
active: {
color: "#ff4081",
},
},
},
}Stack Overflow用户
发布于 2020-12-03 06:26:33
试着改变链接颜色。
drawerPaper: {
backgroundColor: '#0c2d48',
color: '#fff',
},
link: {
color: '#fff',
},Update:通过查看ouput侧边栏上的link元素，您可以给它提供css类名而不是css。
Stack Overflow用户
发布于 2020-12-03 06:39:36
我可以看到，您正在使用React Admin作为侧栏，而不是直接使用实质性UI侧栏。因此，可能的React-Admin模板修改了原始材料Ui的道具，您应该查看react管理侧边栏中的内容，并直接修改它以获得结果。如果您对此应用了重要的UI自定义，这可能是它不起作用的原因。
另一种方法是尝试使用ThemeProvider进行素材UI主题化，并应用主题，这可以覆盖当前的样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65120760
复制相关文章
相似问题
腾讯云开发者
