Как изменить цвет шрифта боковой панели в react-admin?

Я использую react-admin и следую руководствам. Я могу изменить цвет фона, цвет меню верхней панели и цвет шрифта меню верхней панели. Я также могу изменить все размеры шрифта.

Однако я не могу изменить цвет шрифта бокового меню. Я прочитал миллион руководств и перепробовал миллион методов, но абсолютно ничего не меняет цвет шрифта в боковом меню. Я пробовал sx, styles, theme, <Menu /> & <Layout/> и многое другое. Кроме того, руководства на странице react-admin, похоже, основаны на очень устаревших библиотеках @mui.

Я попытался реализовать свой собственный <Menu /> & <Layout/>, но ничего из того, что я делал в sx или styles, не повлияло на цвет шрифта.

Может ли кто-нибудь сказать мне конкретно и четко, как изменить цвет шрифта бокового меню в react-admin?

Это код, который я использую для изменения других шрифтов и цветов.

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

В приложении.tsx; Я использую <Admin theme = {myTheme} ... ></Admin>

Другие свойства темы, по-видимому, также влияют.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я считаю, что вы должны использовать palette.text.primary для этого:

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

Спасибо!!! Это сработало, мне также пришлось использовать text.secondary. Не могли бы вы сказать мне, где вы находите эту информацию? Так что я могу прочитать об этом больше

Juan Perez 20.01.2023 17:05

На самом деле я ищу исходный код проекта: github.com/marmelab/react-admin/blob/…

WiXSL 23.01.2023 14:08

Другие вопросы по теме