Объединить настройки конфигурации темы в Material-UI - PullRequest
Новая
       4

Объединить настройки конфигурации темы в Material-UI

0 голосов
/ 21 января 2020

Я хочу настроить правила темы CUSOM в Material-UI . Я хочу сделать светлую и темную тему и расширить их некоторыми общими настройками.

Я подумал, что было бы неплохо поместить общие настройки для светлой и темной темы в отдельную переменную, а затем объединить их.

Но я столкнулся с проблемой переопределения пользовательских настроек значениями по умолчанию. По умолчанию commonSettings имеет все типы настроек, даже если я их не определял. А при слиянии настройки по умолчанию просто отменяют пользовательские настройки. Так что, возможно, кто-то уже сталкивался с этим и знает, как объединить два массива настроек в один.

Простой пример: 

const commonSettings= createMuiTheme({
    breakpoints: {...},
    direction: 'ltr',
    typography: {...},
});

const lightThemeSettings = createMuiTheme({
    palette: {...},
});

const darkThemeSettings = createMuiTheme({
    palette: {...},
});

// Merge together
const lightTheme = { ...commonSettings, ...lightThemeSettings };
const darkTheme = { ...commonSettings, ...darkThemeSettings };

export default { lightTheme, darkTheme };

Ответы [ 2 ]

1 голос
/ 22 января 2020

Благодаря Райану Когсвеллу . Он подсказал мне правильные мысли.

Я нашел рабочее решение. Вы должны передать commonSettings как arg in createMuiTheme объект: 

const commonSettings= {
    breakpoints: {...},
    direction: 'ltr',
    typography: {...},
};

const lightThemeSettings = createMuiTheme({
    palette: {...},
}, commonSettings // Merge together);

const darkThemeSettings = createMuiTheme({
    palette: {...},
}, commonSettings // Merge together);

export default { lightThemeSettings , darkThemeSettings };
0 голосов
/ 22 января 2020

Ваш код должен работать.

Используйте код ниже и проверьте консоль, вы увидите разницу между двумя вашими темами. 

import React from "react";
import ReactDOM from "react-dom";
import theme from "./themes";

console.log(theme.lightTheme.palette.primary);
console.log(theme.darkTheme.palette.primary);

function App() {
  return (
    <div>
      <h1>Check the console!</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Песочница для кода: https://codesandbox.io/s/dreamy-frost-xmw2j?fontsize=14&hidenavigation=1&theme=dark

...