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.

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.

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

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.

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

Check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee. The value proposition is simply incredible in this course.

Code Sandbox Link

Share this post:

Leave a Comment

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