[FloatingActionButton] Hover color wrong with custom colors

[D3SOX]

Duplicates

• [X] I have searched the existing issues

Related: #30665 #30846

Latest version

• [X] I have tested the latest version

Current behavior 😯

It gets white on hover

+ I get the error

Failed prop type: Invalid prop `color` of value `orange` supplied to `ForwardRef(Fab)`, expected one of ["default","error","info","inherit","primary","secondary","success","warning"].

Expected behavior 🤔

It should get a bit darker color than the normal state one

Steps to reproduce 🕹

https://codesandbox.io/s/floatingactionbuttons-material-custom-color-demo-0jt2n?file=/index.tsx

Context 🔦

I'm trying to create an accent color picker

Your environment 🌎

Tested with Firefox and Brave

`npx @mui/envinfo`

``` System: OS: Linux 5.16 Arch Linux Binaries: Node: 16.13.2 - /usr/bin/node Yarn: 1.22.17 - /usr/bin/yarn npm: 8.4.1 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: 97.0 npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.68 @mui/icons-material: ^5.4.1 => 5.4.1 @mui/material: ^5.4.1 => 5.4.1 @mui/private-theming: 5.4.1 @mui/styled-engine: 5.4.1 @mui/system: 5.4.1 @mui/types: 7.1.1 @mui/utils: 5.4.1 @mui/x-data-grid: ^5.5.1 => 5.5.1 @types/react: ^17.0.39 => 17.0.39 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ~4.5.5 => 4.5.5 ```

[shashank1207]

According to the documentation, you can only set the value of color from one of the following: "default","error","info","inherit","primary","secondary","success","warning". If you want to change the background color of the Fab component, I suggest you to use makeStyles as below: const classes = makeStyles({ edit: { backgroundColor: "orange", "&:hover": { backgroundColor: "palegreen" } } })(); then set className for the Fab component as: `

`

Normally:

On Hover:

[D3SOX]

@shashank1207 Thanks. I already tried that approach with styled/sx but I want consistency with the hover color. How would I define it in this case to be consistent with the default colors? When I hover over the primary one it gets a bit darker. I want the same logic for my custom color.

[abhinav-22-tech]

I want to work on them, is anyone currently working on this?

[derzwen]

Any news on this? This error is pretty annoying in the browser console.