React Material-UI Themes: Customize Material Components for your Project

Bruno Antunes
Bruno Antunes
70.3 هزار بار بازدید - 4 سال پیش - In this video, we will
In this video, we will have a look at how you can customize react material-ui to align with your company identity (design system) and products.

We will create a material-ui theme to customize Colors, Buttons, TextFields, checkboxes, typography and more.

We will override some css properties and also define default properties (props) for some components - for example, we will disable ripple for buttons and checkboxes. We will also disable the expansion animation in TextFields changing also the border-radius and colors.

Timeline:
00:00 Introduction
02:08 Changing material-ui colors (palette)
03:59 Typography customization - fontFamily and fontSize
05:35 Border Radius customization
06:30 Changing default spacing: Space between elements
07:45 Overrides property: Button CSS overrides
08:30 Remove textTransform uppercase from buttons
09:18 Change fullWidth class from buttons
10:18 Change button padding
10:42 Default Props customization: Remove Ripple Effect from buttons
11:40 Default Props customization: Set color=primary and variant on buttons
12:40 Customize material-ui TextField component and checkbox
21:00 Customize MuiPaper and MuiCard default elevation
22:10 Conclusions

----
Repository URL: https://github.com/bmvantunes/youtube...
----

----
Follow me on:
Twitter: Twitter: bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: LinkedIn: bmvantunes
4 سال پیش در تاریخ 1399/04/04 منتشر شده است.
70,349 بـار بازدید شده
... بیشتر