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:

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:

Material-UI Styled Components Button with Hover
Material-UI Styled Components Button with Hover

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.

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

Share this post:

2 thoughts on “Add Hover Styling to a Material-UI Button with Styled Components”

    • Hi Thomas, thanks for the comment. You are correct, theming in MUI v4 is supported and robust. I like it so much I wrote this post about customizing the theme in v4.

      When exploring the styled-components library integration in v4, I was unable to get it to work with a custom MUI theme. Possibly theming + styled-components isn’t supported in v4, possibly I just couldn’t figure it out :). In v5, the MUI team significantly enhanced MUI integration with styled-components and it works great with a custom theme.

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.