Material-UI Изменение цвета по умолчанию - PullRequest
Новая
       7

Material-UI Изменение цвета по умолчанию

0 голосов
/ 27 февраля 2019

Как я могу изменить цвет по умолчанию?Какой объект мне нужно изменить в theme.js?

РЕДАКТИРОВАТЬ

Я хочу изменить по умолчанию (серый цвет), который не primary или secondary или error.

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

Я столкнулся с подобной проблемой для OP, в частности, я хотел изменить цвет кнопки по умолчанию с серого на белый.Комментаторы вопросов верны, каждый компонент имеет свои собственные специфические стили и цвета по сравнению с глобальным цветом по умолчанию.Они должны быть переопределены через пользовательскую тему.Ниже приведен пример переопределения класса кнопки по умолчанию contained путем создания переопределения темы для изменения цвета кнопки по умолчанию.CONTANTS используется для определения конкретных цветов и т. Д. 

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import * as CONSTANTS from './Constants'

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: CONSTANTS.BLUE,
      // dark: will be calculated from palette.primary.main,
      contrastText: CONSTANTS.CONTRAST_TEXT,
    },
  },
  overrides:{
    MuiButton:{
      contained:{
        color: CONSTANTS.BLUE,
        backgroundColor: CONSTANTS.CONTRAST_TEXT,
        '&:hover': {
          backgroundColor: CONSTANTS.LIGHT_BLUE,
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            backgroundColor: CONSTANTS.CONTRAST_TEXT,
          },
        }
      }
    }
  }
});
interface IThemeProps{
  children:any;
}
export default function Theme(props: IThemeProps) {
  return (
    <ThemeProvider theme={theme}>
      {props.children}
    </ThemeProvider>
  );
}

И для использования новой темы: 

import React from 'react';
import Theme from './Theme';
import { Header, Home } from './Components';

const App: React.FC = () => {
  return (
    <Theme>
      <Header>
        <Home />
      </Header>
    </Theme>
  );
}

export default App;
0 голосов
/ 27 февраля 2019

Вам необходимо изменить объект палитры в теме. 

`palette: {
  primary: {
    light: palette.primary[300],
    main: palette.primary[500],
    dark: palette.primary[700],
    contrastText: getContrastText(palette.primary[500]),
  },
  secondary: {
    light: palette.secondary.A200,
    main: palette.secondary.A400,
    dark: palette.secondary.A700,
    contrastText: getContrastText(palette.secondary.A400),
  },enter code here
  error: {
    light: palette.error[300],
    main: palette.error[500],
    dark: palette.error[700],
    contrastText: getContrastText(palette.error[500]),
  },
},`
...