Allow custom color variants for Chips

[i-tozer]

Please allow custom color variants for Chips.

Allowing custom color variants is a known issue: #13875

There is a fix already quoted here: #13875 (comment)

It works for Buttons but it does not work for Chips.

[siriwatknp]

Can you provide a codesandbox, so that we can reproduce?

Here is the template for Chip. https://codesandbox.io/s/og19w?file=/demo.js

[i-tozer]

Try here: https://codesandbox.io/embed/dazzling-bartik-j1gh6?fontsize=14&hidenavigation=1&theme=dark

I commented out the broken chip.

[siriwatknp]

You need to add all of the properties to the palette

const theme = createTheme({
  palette: {
    neutral: {
      main: "#546e7a",
      light: '#90a4ae',
      dark: '#37474f',
      contrastText: '#ffffff',
    }
  }
});

https://codesandbox.io/embed/dazzling-bartik-j1gh6?fontsize=14&hidenavigation=1&theme=dark

will add the to the documentation.

[oliviertassinari]

will add the to the documentation.

@siriwatknp We might be able to do more about it in the future. Assuming that we push #12827 further. I believe we will need to move all the color transformations to the createTheme() time, a place where we can add runtime warnings about wrong user input. It will also remove the crash when the component mounts. Lastly, for the CSS variables to work, we will render var() in the CSS, making it a lot easier to debug:

vs.

diff --git a/packages/material-ui/src/styles/ThemeProvider.js b/packages/material-ui/src/styles/ThemeProvider.js
index d13c4406f2..cdaf612d64 100644
--- a/packages/material-ui/src/styles/ThemeProvider.js
+++ b/packages/material-ui/src/styles/ThemeProvider.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/private-theming';
 import { exactProp } from '@material-ui/utils';
-import { ThemeContext as StyledEngineThemeContext } from '@material-ui/styled-engine';
+import { ThemeContext as StyledEngineThemeContext, GlobalStyles } from '@material-ui/styled-engine';
 import useTheme from './useTheme';

 function InnerThemeProvider(props) {
@@ -28,9 +28,19 @@ InnerThemeProvider.propTypes = {
 function ThemeProvider(props) {
   const { children, theme: localTheme } = props;

+  const secondary = localTheme.palette.secondary.main;
+  localTheme.palette.secondary.main = 'var(--mui-palette-secondary-main)';
+
   return (
     <MuiThemeProvider theme={localTheme}>
-      <InnerThemeProvider>{children}</InnerThemeProvider>
+      <InnerThemeProvider>
+        <GlobalStyles styles={{
+          ":host, :root": {
+            '--mui-palette-secondary-main': secondary,
+          },
+        }} />
+        {children}
+      </InnerThemeProvider>
     </MuiThemeProvider>
   );
 }

cc @mnajdova

[oliviertassinari]

Note that this API is also available:

const defaultTheme = createTheme();
const theme = createTheme({
  palette: {
    neutral: defaultTheme.palette.augmentColor({
      color: {
        main: "#E2410D"
      }
    })
  }
});

https://codesandbox.io/s/billowing-platform-17k8o?file=/src/App.tsx:231-420