How to theme Button _disabled color?

[vadimcoder]

Hi, community!

Could someone please explain me how to change the colors of Button _disabled? This doesn't work:

    Button: {
      baseStyle: {
        selectors: {
          _disabled: {
            backgroundColor: "blue",
          },
        }
      }
    }

Also I tried this this Marked as Answer answer, and it doesn't help either:

defaultTheme.components.Button.appearances.default = {
  ...defaultTheme.components.Button.appearances.default,
  _disabled: {
    backgroundColor: "blue",
  },
}

Evergreen-ui 7.1.4

[brandongregoryscott]

Can you provide a CodeSandbox for reproduction? I think you might be missing something in your setup.

import {
  ThemeProvider,
  mergeTheme,
  defaultTheme,
  Button
} from "evergreen-ui";
import React from "react";

const customTheme = mergeTheme(defaultTheme, {
  components: {
    Button: {
      baseStyle: {
        selectors: {
          _disabled: {
            backgroundColor: "blue"
          }
        }
      }
    }
  }
});

const App: React.FC = () => {
  return (
    <ThemeProvider value={customTheme}>
        <Button disabled={true}>Confirm</Button>
    </ThemeProvider>
  );
};

https://codesandbox.io/s/discussion-1621-button-disabled-styling-cow45v?file=/src/App.tsx

[vadimcoder]

Hello @brandongregoryscott! Thanks, it works! It was my fault, indeed. A misconfiguration on my side, sorry.