0

I spend a few days trying to customize the primary color and add two more colors to the palette. I was able to declare properly the new colors...but at the moment to see those new colors reflected on the button doesnt work. The button are taking the default properties even when I wrapped under the Themeprovider. I'm using storybook.

import React from "react";
import { Meta } from "@storybook/react/types-6-0";
import { Button } from "@mui/material";
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';


const theme = createTheme({
  palette: {
    primary: {
      contrastText: "#ff0000",
      light: "#ff0000",
      main: "#ff0000",
      dark: "#ff0000"
    },
    tertiary: {
      main: "#ff0000"
    },
    failure: {
      main: "#ff0000"
    }
  }
});

const CustomStyles = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Click me</Button>
    </ThemeProvider>
  );
}


const Template = () => {
  return (
    <CustomStyles />
  );
};

export const Default = Template.bind({});

export default {
  title: "mylib/Theme"
} as Meta;

This is how it looks default button style

Themeprovider custom palette

As you may see, the ThemeProvider has the palette color definition...but some how the button doesnt take it. Thanks in advance

juanvargas
  • 5
  • 4

2 Answers2

1

Adding this to.storybook/preview.js was enough to solve my case. Follow the official migration guide on this matter to learn more.

//.storybook/preview.js
    
 import { ThemeProvider } from '@mui/material/styles';
 import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';
 import { theme } from '../your/system/customTheme/path';
        
   const defaultTheme = theme;
        
    const withThemeProvider = (Story, context) => {
       return (
          <Emotion10ThemeProvider theme={defaultTheme}>
             <ThemeProvider theme={defaultTheme}>
               <Story {...context} />
             </ThemeProvider>
           </Emotion10ThemeProvider>
         );
     };
        
   export const decorators = [withThemeProvider];

   //another storybook exports.
Sabrina Tolmer
  • 3,391
  • 1
  • 5
  • 9
0

EDIT: this issue seems to be related to stackoverflow.com/a/70254078/17724218 as OP commented below.

Sam A.
  • 666
  • 4
  • 6
  • I want to do something like this. https://codesandbox.io/s/58168798-add-custom-theme-variable-object-to-createmuitheme-spwit?file=/demo.tsx As you may see, there is no any styleOverrides, I need to use the color definition (primary, secondary, success, etc) – juanvargas Dec 20 '21 at 18:07
  • Again, just changing the colors in `palette` (primary, secondary, success, etc), won't also change the button colors. To change the colors in the buttons, you need to provide global overrides in the theme, make a one-off change using the `sx` prop, or make a reusable custom button using the `styled` method. The codesandbox you're linking to is using the `styled` method. – Sam A. Dec 20 '21 at 19:53
  • I've also edited my answer to show an example of customizing a button using the `styled` method using the colors in `palette`. – Sam A. Dec 20 '21 at 20:17
  • sorry I shared a wrong one... https://codesandbox.io/s/58168798-add-custom-theme-variable-object-to-createmuitheme-forked-j1cj6?file=/demo.tsx Thanks for your help. I guess that there is a straightforward way to customize the theme, just changing the color palette would be good enough. I found a post that helped me a lot. https://stackoverflow.com/a/70254078/17724218 – juanvargas Dec 20 '21 at 20:42
  • Yes, you're right and I was wrong. (Just tried it in my custom theme). If one wants to change *only* the colors in the button, then changing the palette is good enough. If you need other changes as well (borderRadius, etc) then you need either style overrides or `styled`. I'll edit my answer accordingly)) – Sam A. Dec 20 '21 at 20:53
  • Great, yes Im following that approach to customizing, Thanks – juanvargas Dec 21 '21 at 13:26