Examples of Every Material-UI StylesProvider Prop Being Used

The Material-UI Docs are often thorough and have many links to live code examples. However, while reading about StylesProvider I was unable to find live examples for many of the props. In this post I’ll show the effects of various settings for each prop. I’ll include screenshots and relevant React code throughout. A Code Sandbox … Read more

Four Examples of Border Radius in Material-UI

A default design pattern in Material-UI is to create rounded corners with border radius. There are several ways to customize border radius ‘once’ and to have it globally available: Creating a custom theme and globally overriding a component type’s borderRadius style value Creating a custom theme and changing the value of shape.borderRadius Creating a StyledComponent … Read more

How to Align Material-UI CardActions

CardActions in Material-UI are generally used to add components to the bottom of a Card. These are often icons wrapped in an IconButton. You may have several of these action components and need to align them precisely as desired. That can be done easily either with flex or margin, and we will explore examples of … Read more

Four Examples of Using Material-UI CardMedia

Material-UI’s Card component has an aptly named composite component named CardMedia. As you likely guessed, it is intended to contain various kinds of media: video, audio, image, picture, and iframe. The CardMedia component is most commonly used for images, according to my keyword research. That’s not a surprise, but I still thought it would be … Read more

Material-UI Card Header With Every Prop Enabled and Explained

Material-UI Card Header With All Props Enabled

The Material-UI Card Header component is a versatile component that can make Card layouts look great. Naturally I wondered: what does a Card look like with every single prop enabled? There are nine total props on the card header; I’ve actually only enabled eight of them because the disableTypography prop actually turns off two other … Read more

How to Use Material-UI’s Flexbox System

The flexbox module is a direction agnostic layout system made for managing the layout of a component. Flex is designed for optimizing layout when available space is unknown or dynamic. The flexbox layout includes props set on both parent and children elements to control child size and order. Read an incredibly detailed overview of the … Read more

Add Buttons, Links, and Other Custom Cells in Material-UI Datagrid

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

How to Set Multiple Values Programmatically in Material-UI’s Autocomplete Component

It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState. For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically … Read more

How to Start a Programming Blog: A Three-Year Path to Making $100 a Day

How to Start a Programming Blog

In April 2020 I started this site. The world had been thrown into disarray by coronavirus and the U.S. job market suddenly looked gloomy. I figured having a portfolio of code that I could demonstrate in an interview was my best protection. Coding in the evening also made me better at my current job. Write … Read more

Why Use AirBnB’s ESLint Config? A Review of AirBnB’s Rules List

Properly formatted code is a widely agreed-upon virtue in the craft of programming. There are sometimes differences of opinions on exactly what the right format is, but generally it is formatting that contributes to the readability of code and understanding of the intent of the code. Perhaps the most common rules list for ESLint is … Read more