How to change side-bar font color in react-admin?-CodePudding

I'be been using react-admin and following the guides. I am able to change the background color, the top-bar-menu color and the top-bar-menu font color. I can also change all font sizes.

However, I am unable to change the side-bar-menu font color. I read a million guides and tried a million methods but absolutely nothing seems to change the side-bar-menu font color. I tried sx, styles, theme, <Menu /> & <Layout/>, and more. Also the guides in react-admin's page seem to based on very outdated @mui libraries.

I tried implementing my own <Menu /> & <Layout/>, but nothing I did in sx or styles had any effect on font color.

Can anyone tell me specifically and clearly how to change the font color of the side-bar-menu in react-admin?

This is the code that I use to change other fonts & colors.

export const myTheme = {
  palette: {
    background: {
      default: `#263238` // background color
    },
    primary: {
      main: `#263238`, // has no effect on anything
      contrastText: `#81C784`, // has no effect on anything
    },
    secondary: {
      main: `#263238`, // top-bar color
      contrastText: `#81C784`, // top-bar font color
    }
  },
  typography: {
    fontSize: 25, // affects all text
  }
}

In app.tsx; I use <Admin theme={myTheme} ... ></Admin>

Other properties of theme seem to have to effect either.

CodePudding user response：

I believe you have to use palette.text.primary for that:

export const myTheme = {
  palette: {
    background: {
      default: `#263238` // background color
    },
    primary: {
      main: `#263238`, // has no effect on anything
      contrastText: `#81C784`, // has no effect on anything
    },
    secondary: {
      main: `#263238`, // top-bar color
      contrastText: `#81C784`, // top-bar font color
    },
    text: {
        primary: '#263238',
    },
  },
  typography: {
    fontSize: 25, // affects all text
  }
}