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)`
padding: 6px 12px;
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
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
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 = () => (
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.
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?
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 a complete guide to MUI MenuItem Links, Disabled and Selected state, and more. This Menu pops open below a Button component.