mui / mui/material-ui

buttonClasses.ts is missing options for success, error, warning, and info

Open
#29,581 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

discussion scope: button
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

It appears that several button variants are missing from buttonClasses.ts

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I am trying to change the hover color for a number of button variants using a custom theme. I'd like to set the option in the theme like this:

export const themeOptions: ThemeOptions = {
    palette: { ... }
    components: {
        MuiButton: {
            styleOverrides: {
                containedPrimary: {  // OK
                    '&:hover': {
                        background: '#F00'
                    },
                },
                containedError: {  // NOT OK
                    '&:hover': {
                        background: '#0F0'
                    },
                },
                ...
            }
        }
    }
};

This results in TypeScript complaining as follows:
Object literal may only specify known properties, and 'containedError' does not exist in type 'Partial<OverridesStyleRules<keyof ButtonClasses>>'.ts(2322)

Expected Behavior 🤔

I'd expect that these button variants exist as supported types by buttonClasses.

Steps to Reproduce 🕹

Steps:

  1. Create a custom theme using TypeScript
  2. Add a MuiButton styleOverride for a variant like containedError.
  3. Observe the TypeScript error

Context 🔦

I'm trying to change the styling of button variants.

Your Environment 🌎

`npx @mui/envinfo` Using Chrome

System:
OS: macOS 11.6
Binaries:
Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
Yarn: Not Found
npm: 7.13.0 - ~/.nvm/versions/node/v16.1.0/bin/npm
Browsers:
Chrome: 95.0.4638.69
Edge: Not Found
Firefox: Not Found
Safari: 14.1.2
npmPackages:
@emotion/react: ^11.5.0 => 11.5.0
@emotion/styled: 10.0.27
@mui/core: ^5.0.0-alpha.51 => 5.0.0-alpha.54
@mui/material: ^5.0.3 => 5.1.0
@mui/private-theming: 5.1.0
@mui/styled-engine: 5.1.0
@mui/system: ^5.0.4 => 5.1.0
@mui/types: 7.1.0
@mui/utils: 5.1.0
@types/react: ^17.0.14 => 17.0.33
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
typescript: ^4.3.5 => 4.4.4

tsconfig { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in buttonClasses.ts and inspect how MuiButton styleOverrides keys are typed, especially the containedError, containedSuccess, containedWarning, and containedInfo variants. Reproduce the TypeScript error with a custom theme and verify that these variant overrides are accepted without errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.