Override MaterialUI media query style with stylefy

[rbabbra95]

Hello,

I have attempted to override the MaterialUI Tab style using the stylefy , but have not been successful in doing so. I have trying using the ::stylefy/media prop but the CSS does not change in the webpage. Is there an alternative way to do this?

Rosie

[Jarzka]

I'm not sure what's causing the problem without seeing the code which is affecting the Tab element (MaterialUI and your style definition).

However, it's likely that some of the style definitions in MaterialUI have stronger (more precise) CSS selectors than stylefy's autogenerated class names and thus are applied even if you try to override them with stylefy. This becomes down to the fact how CSS applies styles when multiple style definitions are targeting the same element. The order of CSS selectors does matter (stylefy's definitions should come after MaterialUI in HTML), but more precise selector is usually going to win.

There is a previous issue where we discussed how to override Bootstrap styles with stylefy. I see two ways to do this:

• Mark your overriding styles with !important
• Use stylefy's manual mode to write a selector which is the same or more precise than the selector of MaterialUI. This is probably a better way.