Скачать или смотреть Material UI Theme Override and Props in React JS [Global Styles]

Learn how global styles with Material UI Theme Override and Props can help you create reusable "brand components" for your project in React. In this Material UI tutorial, Kelsey walks you through every step to help you create more consistency with styling in your React project.

See the code examples from this video:
https://headway.io/blog/global-stylin...

Notes:
One of the easiest and most common approaches to customizing Material-UI components is using props and classes for one-time use. These one-time-use components often evolve into reusable brand components. However, there's an alternative way you might overlook if you always reach for brand components.

In this video, we'll use global CSS overrides and default props in our theme to customize all instances of a Material-UI component in a project.

3 Key Advantages of This Approach
1. Our code will be more concise.
2. It will make our component styling consistent across our application and more portable across projects.
3. We will avoid breaking the Material-UI components' contracts.

=========================

Brand Components vs. Theme Overrides and Props:

What is a Brand Component? When developing apps with Material-UI, we often want to customize the appearance and behavior of Material-UI components. In customizing a component, we can make a "brand" component - meaning a Material-UI component with a thin component wrapper, applying classes, and setting props.

Brand components allow for reusability - but utilizing theme overrides and props has additional advantages:

1. Less code and fewer files
Component props are set in the theme's props and styles are set in the theme's overrides. This eliminates the need for brand component code and files.

2. More portable
When using brand components, if we want to use our customized components in another project, we have to move our theme and all our brand component files. When using theme overrides and props, we can simply move our theme.

3. Leaves the component contract intact:
In the example above, the props we intend to accept from the component's user are color and children. If the component's user is familiar with Material-UI components, they might expect to be able to pass in a component prop with the value "a" so the component is an anchor tag that looks like a button because component is a valid prop on the Material-UI Button. The BrandButton won't do anything with the component prop because it isn't in its props list. This could cause frustration for the user and result in your needing to update the brand component.

=========================

TypeScript Consideration
Material-UI has TypeScript support. If you wrap a Material-UI component in a brand component, you lose the component's TypeScript typing!

With the BrandButton, the type is a generic React FunctionComponent type.

When using the component directly and applying styles via theme overrides and props, the component type from Material-UI remains intact.

========================
💻More Dev Resources
========================

Best Practices and Tools for Managing Remote Development Teams
https://bit.ly/tools-for-remote-dev-t...

Level Up Your Development Team with Better Agile Retrospectives
http://bit.ly/level-up-dev-retros

Videos for Getting Started with React
https://www.youtube.com/playlist?list...


========================
🎙Dev and Design Podcasts
========================

Even-Keeled
http://bit.ly/even-keeled-podcast

Seaworthy
http://bit.ly/swthy-pdcst


========================
📱Connect with us:
========================

Instagram
https://bit.ly/follow-headway-instagram

Twitter
https://bit.ly/follow-headway-twitter

LinkedIn
https://bit.ly/follow-headway-linkedin