OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React MUI 5 unable to overwrite default styles with custom-defined styles

  • Thread starter Thread starter joker876
  • Start date Start date
J

joker876

Guest
I am trying to overwrite default MUI 5 Button styles with custom styles (using either withStyles or through a className (defined using makeStyles), but the default styles are always on top of the custom ones. The issue with withStyles was resolved by adding those styles to the global style overrides when defining the theme, but the className-based ones are problematic.

How do I resolve that? Below are some screenshots of the weird behavior.


^ A screenshot of the styles of the button in question. (Some default styles were removed to fit in one screenshot). You can see the default styles overwriting the paddings set by the custom styles.
<p>I am trying to overwrite default MUI 5 Button styles with custom styles (using either <code>withStyles</code> or through a <code>className</code> (defined using <code>makeStyles</code>), but the default styles are always on top of the custom ones. The issue with <code>withStyles</code> was resolved by adding those styles to the global style overrides when defining the theme, but the className-based ones are problematic.</p>
<p>How do I resolve that? Below are some screenshots of the weird behavior.</p>
<p><a href="https://i.sstatic.net/A1943S8J.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/A1943S8J.png" alt="" /></a>
<br/>^ A screenshot of the styles of the button in question. (Some default styles were removed to fit in one screenshot). You can see the default styles overwriting the paddings set by the custom styles.</p>
Continue reading...
 

Latest posts

A
Replies
0
Views
1
Anthonin Chaboteaux
A
Top