如何在 react-admin 中更改侧边栏字体颜色？

Question

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.

Answer 1

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
  }
}