Exploring JavaScript Libraries
Material-UI does a good job of keeping Icon color and SVGIcon color simple to customize. A common approach is setting the color prop with a MUI theme color, like primary or secondary. However, if you want to use rgba or hex colors on MUI Icons, change background color, or change Icon color on hover, you … Read more
Bootstrap makes layouts easy and has an excellent component library. However, sometimes it can be tricky to get buttons and other components aligned exactly as needed. In this tutorial I will build the grid shown below. It will have buttons aligned right, left, and vertically. I will show alignment with both flex CSS and bootstrap … Read more
Bootstrap is an immensely popular CSS and JS library that facilitates quick grid-style layouts. The library also has a significant number of components in its component library. My favorite thing about the Bootstrap component library is its simplicity. For example, a Button component is simply an html button element paired with Bootstrap’s btn class (and … Read more
Material-UI version 5 made the styled API one of two primary component styling APIs. Unfortunately, the complexity of styled componenents in Material-UI increased exponentially. For example, now developers must decide: My goal with this guide is to aid the 90% of developers who want a simple setup for using Styled Components with MUI. I will … Read more
Table pagination can be broken into two conceptual pieces: the UI interface for changing pages, and the paginated data request. Material-UI’s TablePagination component is a robust component for solving the UI interface. The MUI TablePagination component is a dynamic and highly customizable component. It has 18 props listed in the docs, and these control everything … Read more
Material-UI (rebranded as MUI) recently released version 5, and there were significant changes to the syntax and systems used for styling components. Material-UI v4 relied on JSS and the makeStyles hook for component styling. MUI v5 has migrated to two options: styled API or sx API (<- definitely read this). The styled API creates a … Read more
Styling hooks in Material-UI are an effective and exceptional tool for customizing components. However, the similarly-named hooks can be confusing to use. In this post, I’ll explain what each hook does, when to use it, and which hooks are recommended for certain situations. ***MUI 5 UPDATE: There is a new styling system in MUI 5. … Read more
Material-UI’s DataGrid can be customized to meet a variety of use cases. A particularly useful feature is the renderCell prop, which is a prop of the columns object in the DataGrid. The renderCell prop allows you to inject components into the DataGrid, creating a column of custom cells. This post will explore the code for … Read more
There are 12 top-level fields within the Theme object that can be customized to give your app the exact look-and-feel that you desire (see the entire default theme object here). Palette may be the most commonly customized field, but in this guide, I will demo less commonly configured fields: breakpoints, overrides, shadows, and typography. I … Read more
MUI Tabs are a handy component for easy navigation with out-of-the-box styling. However, sometimes that styling is more than we need. In this Tab Panel example, we will disable the indicator (the underline at the bottom of the Tab just above the shadow) and instead add our own styling. We will style Material-UI’s Tabs with … Read more
