Основной цвет кнопки доступа в React

Question

Я пытаюсь предоставить переопределения в теме для кнопок, которые содержатся, являются основными и зависшими. Я пробовал это, но это не работает

CODESANDBOX LINK НАЖМИТЕ ЗДЕСЬ

theme / overrides / MuiButton. js

import palette from '../palette';

export default {
  contained: {
    backgroundColor: '#FFFFFF',
    '&.primary': {
      '&:hover': {
        backgroundColor: palette.primary.dark,
      },
    },
  },
};

тема / переопределения / индекс. js

import MuiButton from "./MuiButton";

export default {
  MuiButton
};

тема / индекс. js

import { createMuiTheme } from "@material-ui/core";

import palette from "./palette";
import typography from "./typography";
import overrides from "./overrides";

const theme = createMuiTheme({
  palette,
  typography,
  overrides,
  zIndex: {
    appBar: 1200,
    drawer: 1100
  }
});

export default theme;

Answer 1

Лучший ресурс для определения того, как соответствующим образом переопределить стили по умолчанию в вашей теме, - это посмотреть, как определены стили по умолчанию.

From https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/Button/Button.js#L138:

  containedPrimary: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: theme.palette.primary.main,
      },
    },
  },

Перевод этого подхода в код в вашем вопросе будет выглядеть так:

import palette from '../palette';

export default {
  containedPrimary: {
    backgroundColor: '#FFFFFF',
    '&:hover': {
      backgroundColor: palette.primary.dark,
    },
  },
};

Редактировать демо материала