Реагируйте с темой пользовательского интерфейса материала - настройка глобальной цветовой переменной

Question

Как я могу переопределить стандартную тему material-ui с настроенным глобальным CSS? Кроме того, как мы можем использовать HEX-значение цветов для настройки основного и дополнительного цвета при оформлении темы?

App.js

У меня есть корневой файл App.js, в котором я создал собственную тему иМне нужно применить внешний css скажем custom-style.css в моей пользовательской теме, чтобы переопределить стиль по умолчанию Material-UI. (Изо всех сил пытаюсь получить стилизацию для цветов элементов формы для различных состояний и цветов состояния кнопки, если быть точным!)

Вот код:

App.js

const theme = createMuiTheme({  
  palette: {
    primary: '#2765af',
    secondary: '#f56428',
  },
  status: {
    danger: 'orange',
  },
});

function App(){
    <ThemeProvider theme={theme}>
        ...
    <ThemeProvider>     
}

HEX-код не разрешен и выдает ошибку компиляции. Также настроенные стили CSS-файла (custom-styles.css) переопределяются стилем по умолчанию, если я не использую объект темы и добавляю этот файл в App.js, чтобы попытать счастья.

Пожалуйста, помогите мне.

Answer 1

Пример: https://codesandbox.io/s/testing-material-ui-typography-w6et9

Демонстрация с кнопками нестандартного цвета. Переопределение цвета темы шестнадцатеричным цветом в теме приложения: index.js.

const theme = createMuiTheme({
  palette: {
    primary: { main: "#d41252" },
    secondary: { main: "#F1B929" }, 
    type: "dark"
  }
});