[Button] Custom variant

docs/src/pages/components/buttons/CustomizedButtons.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   createMuiTheme,
   withStyles,
@@ -66,6 +67,21 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
+  additions: {
+    MuiButton: {
+      dashed: {
+        padding: '5px 15px',
+        border: "5px dashed red",
+        '&$disabled': {
+          border: `5px dashed red`,
+        },
+      },
+      tertiery: {
+        backgroundColor: 'yellow',
+        padding: 20,
+      }
+    },
+  }
 });
 
 export default function CustomizedButtons() {
@@ -84,6 +100,9 @@ export default function CustomizedButtons() {
         <Button variant="contained" color="primary" className={classes.margin}>
           Theme Provider
         </Button>
+        <Button variant="dashed" color="primary" className={classes.margin}>
+          Dashed Variant
+        </Button>
       </ThemeProvider>
       <BootstrapButton
         variant="contained"

docs/src/pages/components/buttons/CustomizedButtons.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   createMuiTheme,
   createStyles,
@@ -7,7 +8,7 @@ import {
   Theme,
   ThemeProvider,
 } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import Button, { ButtonProps } from '@material-ui/core/Button';
 import { green, purple } from '@material-ui/core/colors';
 
 const BootstrapButton = withStyles({
@@ -70,6 +71,21 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
+  additions: {
+    MuiButton: {
+      dashed: {
+        padding: '5px 15px',
+        border: "5px dashed red",
+        '&$disabled': {
+          border: `5px dashed red`,
+        },
+      },
+      tertiery: {
+        backgroundColor: 'yellow',
+        padding: 20,
+      }
+    },
+  },
 });
 
 export default function CustomizedButtons() {
@@ -88,6 +104,9 @@ export default function CustomizedButtons() {
         <Button variant="contained" color="primary" className={classes.margin}>
           Theme Provider
         </Button>
+        <Button variant="dashed" color="primary" className={classes.margin}>
+          Dashed Variant
+        </Button>
       </ThemeProvider>
       <BootstrapButton
         variant="contained"

packages/material-ui-styles/src/getStylesCreator/getStylesCreator.js

@@ -36,11 +36,12 @@ export default function getStylesCreator(stylesOrCreator) {
         throw err;
       }
 
-      if (!name || !theme.overrides || !theme.overrides[name]) {
+      if (!name || ((!theme.overrides || !theme.overrides[name]) && (!theme.additions || !theme.additions[name]))) {
         return styles;
       }
 
-      const overrides = theme.overrides[name];
+      const additions = theme.additions[name] || {};
+      const overrides = theme.overrides[name] || {};
       const stylesWithOverrides = { ...styles };
 
       Object.keys(overrides).forEach((key) => {
@@ -50,12 +51,17 @@ export default function getStylesCreator(stylesOrCreator) {
               [
                 'Material-UI: You are trying to override a style that does not exist.',
                 `Fix the \`${key}\` key of \`theme.overrides.${name}\`.`,
+                'If you intentionally wanted to add new key, please use the theme.additions option',
               ].join('\n'),
             );
           }
         }
 
-        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
+        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key] || {}, overrides[key]);
+      });
+
+      Object.keys(additions).forEach((key) => {
+        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key] || {}, additions[key]);
       });
 
       return stylesWithOverrides;

packages/material-ui/src/Button/Button.d.ts

@@ -52,7 +52,7 @@ export type ButtonTypeMap<
     /**
      * The variant to use.
      */
-    variant?: 'text' | 'outlined' | 'contained';
+    variant?: 'text' | 'outlined' | 'contained' | string;
   };
   defaultComponent: D;
   classKey: ButtonClassKey;

packages/material-ui/src/Button/Button.js

@@ -409,7 +409,7 @@ Button.propTypes = {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
+  variant: PropTypes.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string]),
 };
 
 export default withStyles(styles, { name: 'MuiButton' })(Button);

packages/material-ui/src/styles/additions.d.ts

@@ -0,0 +1,100 @@
+import { StyleRules } from './withStyles';
+
+export interface Additions {
+  MuiAppBar?: StyleRules;
+  MuiAvatar?: StyleRules;
+  MuiBackdrop?: StyleRules;
+  MuiBadge?: StyleRules;
+  MuiBottomNavigation?: StyleRules;
+  MuiBottomNavigationAction?: StyleRules;
+  MuiBreadcrumbs?: StyleRules;
+  MuiButton?: StyleRules;
+  MuiButtonBase?: StyleRules;
+  MuiButtonGroup?: StyleRules;
+  MuiCard?: StyleRules;
+  MuiCardActionArea?: StyleRules;
+  MuiCardActions?: StyleRules;
+  MuiCardContent?: StyleRules;
+  MuiCardHeader?: StyleRules;
+  MuiCardMedia?: StyleRules;
+  MuiCheckbox?: StyleRules;
+  MuiChip?: StyleRules;
+  MuiCircularProgress?: StyleRules;
+  MuiCollapse?: StyleRules;
+  MuiContainer?: StyleRules;
+  MuiDialog?: StyleRules;
+  MuiDialogActions?: StyleRules;
+  MuiDialogContent?: StyleRules;
+  MuiDialogContentText?: StyleRules;
+  MuiDialogTitle?: StyleRules;
+  MuiDivider?: StyleRules;
+  MuiDrawer?: StyleRules;
+  MuiAccordion?: StyleRules;
+  MuiAccordionActions?: StyleRules;
+  MuiAccordionDetails?: StyleRules;
+  MuiAccordionSummary?: StyleRules;
+  MuiFab?: StyleRules;
+  MuiFilledInput?: StyleRules;
+  MuiFormControl?: StyleRules;
+  MuiFormControlLabel?: StyleRules;
+  MuiFormGroup?: StyleRules;
+  MuiFormHelperText?: StyleRules;
+  MuiFormLabel?: StyleRules;
+  MuiGrid?: StyleRules;
+  MuiGridList?: StyleRules;
+  MuiGridListTile?: StyleRules;
+  MuiGridListTileBar?: StyleRules;
+  MuiIcon?: StyleRules;
+  MuiIconButton?: StyleRules;
+  MuiInput?: StyleRules;
+  MuiInputAdornment?: StyleRules;
+  MuiInputBase?: StyleRules;
+  MuiInputLabel?: StyleRules;
+  MuiLinearProgress?: StyleRules;
+  MuiLink?: StyleRules;
+  MuiList?: StyleRules;
+  MuiListItem?: StyleRules;
+  MuiListItemAvatar?: StyleRules;
+  MuiListItemIcon?: StyleRules;
+  MuiListItemSecondaryAction?: StyleRules;
+  MuiListItemText?: StyleRules;
+  MuiListSubheader?: StyleRules;
+  MuiMenu?: StyleRules;
+  MuiMenuItem?: StyleRules;
+  MuiMobileStepper?: StyleRules;
+  MuiNativeSelect?: StyleRules;
+  MuiOutlinedInput?: StyleRules;
+  MuiPaper?: StyleRules;
+  MuiPopover?: StyleRules;
+  MuiRadio?: StyleRules;
+  MuiScopedCssBaseline?: StyleRules;
+  MuiSelect?: StyleRules;
+  MuiSlider?: StyleRules;
+  MuiSnackbar?: StyleRules;
+  MuiSnackbarContent?: StyleRules;
+  MuiStep?: StyleRules;
+  MuiStepButton?: StyleRules;
+  MuiStepConnector?: StyleRules;
+  MuiStepContent?: StyleRules;
+  MuiStepIcon?: StyleRules;
+  MuiStepLabel?: StyleRules;
+  MuiStepper?: StyleRules;
+  MuiSvgIcon?: StyleRules;
+  MuiSwitch?: StyleRules;
+  MuiTab?: StyleRules;
+  MuiTable?: StyleRules;
+  MuiTableBody?: StyleRules;
+  MuiTableCell?: StyleRules;
+  MuiTableContainer?: StyleRules;
+  MuiTableFooter?: StyleRules;
+  MuiTableHead?: StyleRules;
+  MuiTablePagination?: StyleRules;
+  MuiTableRow?: StyleRules;
+  MuiTableSortLabel?: StyleRules;
+  MuiTabs?: StyleRules;
+  MuiTextField?: StyleRules;
+  MuiToolbar?: StyleRules;
+  MuiTooltip?: StyleRules;
+  MuiTouchRipple?: StyleRules;
+  MuiTypography?: StyleRules;
+}

packages/material-ui/src/styles/createMuiTheme.d.ts

@@ -8,12 +8,14 @@ import { Spacing, SpacingOptions } from './createSpacing';
 import { Transitions, TransitionsOptions } from './transitions';
 import { ZIndex, ZIndexOptions } from './zIndex';
 import { Overrides } from './overrides';
+import { Additions } from './additions';
 import { ComponentsProps } from './props';
 
 export type Direction = 'ltr' | 'rtl';
 
 export interface ThemeOptions {
   shape?: ShapeOptions;
+  additions?: Additions;
   breakpoints?: BreakpointsOptions;
   direction?: Direction;
   mixins?: MixinsOptions;
@@ -30,6 +32,7 @@ export interface ThemeOptions {
 
 export interface Theme {
   shape: Shape;
+  additions?: Additions;
   breakpoints: Breakpoints;
   direction: Direction;
   mixins: Mixins;

packages/material-ui/src/styles/createMuiTheme.js

@@ -25,6 +25,7 @@ function createMuiTheme(options = {}, ...args) {
 
   let muiTheme = deepmerge(
     {
+      additions: {},
       breakpoints,
       direction: 'ltr',
       mixins: createMixins(breakpoints, spacing, mixinsInput),
@@ -95,6 +96,7 @@ function createMuiTheme(options = {}, ...args) {
     };
 
     traverse(muiTheme.overrides);
+    traverse(muiTheme.additions);
   }
 
   return muiTheme;