[material-ui][FloatingActionButton] Convert to support CSS extraction

[gijsbotje]

Part of #41273

• I have followed (at least) the PR section of the contributing guide.

@siriwatknp

I found 2 problems.

It seems the sx prop in the example doesn't work. I couldn't find how this should be fixed. This results in a gray left aligned Fab, instead of a right aligned green fab.

Pigment	Current

In dark mode it also uses the css var for primary text to style the default button. This results in white text on the grey[300] background. without vars it uses the getContrastText function to determine a color.

color: theme.vars
      ? theme.vars.palette.text.primary
      : theme.palette.getContrastText?.(theme.palette.grey[300])

Full examples page

light	dark

[mui-bot]

Netlify deploy preview

https://deploy-preview-41851--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a6a3db2

[siriwatknp]

👍 Nicely done.