Material-UI
Throughout my career of frontend development, I have styled my applications several different ways when creating them. Initially I began with the simple approach by using CSS stylesheets wherein I would apply styling to HTML elements via class or ID in a jQuery setting. Later on when I moved into the library React, I began using the more sophisticated library Bootstrap in order to design the frontend aspects of my application. Recently however, I wanted to venture into a new library for design and discovered Material-UI: A fantastic library wherein developers can create expertly styled React components.
Material-UI was born out of the desire to make React more design-friendly. Additionally developers of MUI wanted to incorporate component functionality with styled JSX elements. The Material-UI library maintains a free version as well as more advanced versions that come at premium pricing. Material-UI was created in 2014 and is credited to a developer by the name of Hai Nguyen(his Twitter bio states co-creator).
The library Material-UI assists developers in designing palatable frontend components. The typical base designs that come with react components for JSX elements are usually dull and not presentable in any fashion. In these cases, you would have to set up your own base design to have your component looking somewhat decent. But with Material-UI implemented into your local repository, you are able to have base components that also have custom properties in which ease of design is possible. Taking a look at any of their base components like the button shows how smooth their initial design is compared to not having Material-UI.
Material-UI incorporates several design choices that are effective and simple to apply to your application. Here I am showing a very easy button implementation that I added into an application I am building. The button itself is a React component on which I have added properties like color and variant to set simple base designs.
<Button onClick={() => alert(‘Clicked!’)} startIcon={<AddAlertIcon />} href=’https://www.google.com/' variant=”contained” color=”secondary”>Click!</Button>
The color property is fairly obvious, but the variant property adds a border with depth around the text. Additionally I added a “startIcon” property in order to incorporate an Icon on the button. Icons are extremely helpful, because they can indicate in a universal language what the button is prepared to do. For example, this button has a bell, so you can imagine it would notify or alert a user upon being clicked. This type of styling is easy to incorporate and Material-UI has an incredible library of icons to choose from.
In conclusion, there are many design-based libraries even outside the ones mentioned in this article that can bring your website’s user interface to the next level. Working with Bootstrap has been a really great experience, but being able to integrate a new design library showed me a different approach. Material-UI’s ease of use as well as simple implementation make it a marvelous library. Additionally, Material-UI’s documentation makes it easy to explore all the design possibilities one has at their keyboard. If one is looking to get into different design libraries, Material-UI remains an excellent choice among the many options.
Works Cited
