CODEWITHSUNDEEP
reactjsmaterial-uireact-admin
Yusuf Alii
Yusuf Alii

Reputation: 37

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

I tried using different properties in the sidebar style to override the link color but nothing is working.

Default style/color of Sidebar drawer (before overriding the style)

enter image description here

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;

Result (after overriding the default style in MySidebar.js)

Result (after overriding the default style in MySidebar.js)

As you can see, I'm able to change bg color of the sidebar but not the link colors.

Please help. It's driving me crazy!

Upvotes: 0

Views: 3715

Answers (3)

MaxAlex
MaxAlex

Reputation: 3319

You can create your own theme as described here: https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme and in your theme redefine the colors of all MenuItemLink components:

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

Upvotes: 1

Naazneen Jatu
Naazneen Jatu

Reputation: 546

Try changing link colors.

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

Update: Instead of link you can give it the css class name, by looking at inspect element on the ouput sidebar.

Upvotes: 0

user14361391
user14361391

Reputation:

I can see that you are using React-Admin for the sidebar and not the Material UI sidebar directly. So possibly the React-Admin template modified the props of original material Ui and you should take a look inside the react admin sidebar and modify it directly there to get the results. If you apply material UI customization on this one, it might be the reason its not working.

Alternative is to try Material UI Themeing with ThemeProvider and apply the theme, which can overwrite the current styling.

Upvotes: 0

Related Questions