Add Hover Styling to a Material-UI Button with Styled Components

Material-UI is compatible with the popular Styled Components library. While MUI normally uses JSS, devs can choose whichever styling library they prefer.

Most of the Material-UI docs give examples using JSS and it can be difficult to figure out proper syntax for combining MUI with Styled Components. However, buried deep inside the MUI docs is an example of adding button hover styling with Styled Components.

Here’s my essential guide to the new styled() API.

I forked the Material-UI docs Code Sandbox and expanded on it with some useful additions. My Code Sandbox Link is in the Resources section.

Here are some additional useful posts:

• The Ultimate Material-UI Custom Button Example (MUI v5)
• Material-UI Button onClick (and More Events) With TypeScript
• The Complete Guide to MUI Button Color (v5 and v4)
• The Essential MUI Tooltip Demo With Custom Position, Arrow, and Internal Components
• The Best MUI Tabs Tutorial: Hover, Active, Focus, and onClick
• Four Bootstrap Button Hover Examples

MUI Styled Components Code

A great thing about using Styled Components is that the code uses CSS syntax. Here’s a simple styled button:

const StyledButton = styled(Button)`
  background-color: grey;
  color: #fff;
  padding: 6px 12px;
  &:hover {
    background-color: #a9a9a9;
  }
  &:focus {
    background-color: green;
  }
`;

The hover selector is simple to add. There is no space needed because it it selecting the hover pseudo-class applied at the top level of the button component. Notice that there is no comma or semicolon between the &:hover and &:focus selectors.

Looking at dev tools, we can see how the styling library overrides MUI’s default button styling:

Instead of working with Material-UI’s styling API, it overrides it. Notice that the .MuiButton-root class is overridden in favor of the generated .FDEJd class.

Remove the hover color with a transparent background.

Styles Provider?

Make sure you wrap your button code in StylesProvider and enable the injectFirst prop. This enables Styled Components to have precedence over default Material-UI classes, like we saw in dev tools above.

const App = () => (
  <StylesProvider injectFirst>
    <StyledComponentsButton />
  </StylesProvider>
);

Material-UI Styled Components with Theme

It is likely that you want to use theme values to style your components. Unfortunately, when I attempted to use theme variables with Styled Components I discovered there were two problems with this.

First, theming Material-UI Styled Components isn’t possible until you switch over to the recently released version 5. It may be possible to create a local ‘theme’ object and reference it using template literals in your styling code, but that’s not the same caliber as the traditional MUI theme system.

Second, in v5 you can use the theme but it reverts Styled Components to JavaScript syntax…and then what’s the point of using it? Here are the V5 docs describing using theming with Styled Components. Notice that it looks just like JSS except that it uses the styled() function instead of makeStyles or another hook. I personally think a big advantage of Styled Components is that it uses traditional CSS syntax, so why bother using it if it I have to use JS syntax?

Resources

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

With a little cleverness, we can override hover styling to disabled buttons.

Here’s how to set MUI Icon hover color, and how to set MUI IconButton hover color.

Here’s a complete guide to MUI MenuItem Links, Disabled and Selected state, and more. This Menu pops open below a Button component.

Code Sandbox Link