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

Furthermore, Material-UI provides a Border Utility that gives us a shorthand for applying border properties.

We’ll take a look at an example of each of these options. The Code Sandbox with full React code is in the Resources section.

Material-UI Theme Overrides

To quickly add a border radius to all instances of a component, create a custom theme and add an overrides section.

To create a custom theme, use the createMuiTheme hook. Then import that theme at a high level in your component and wrap all subcomponents in a ThemeProvider that uses that theme.

Wrapping the Playground component in App.jsx:

<ThemeProvider theme={customTheme}>
  <BorderRadiusPlayground />
</ThemeProvider>

Custom theme in Theme.jsx:

const customTheme = createMuiTheme({
  overrides: {
    MuiContainer: {
      root: {
        border: "1px solid black",
        width: 80,
        height: 80
        borderRadius: 8
      }
    }
  }
});

Within the theme overrides object, there is a syntax for selecting components to override. For example, MuiContainer is the prefix for all classes applied to Container by default. Material-UI uses the same naming convention in the overrides object.

The styling above results in a Container that looks like the below:

Material-UI Theme Override Border Radius

Material-UI Theme Shape.BorderRadius

Setting a custom value to shape.borderRadius is a one-line way to change border radius all across a web app if you are already using a custom theme.

Take another look at the overrides code above. That changed border radius for all instances of a component type. If you want all component types have a default border radius to use a custom value, simply add the following line to your custom theme:

customTheme.shape.borderRadius = 20;

This does not add border radius to components that don’t have one by default. For example, Button does but Container and Box do not.

Material-UI Theme shapes.borderRadius

Also notice that Button does not have access to the Border Utility, so adding the borderRadius prop does not have any effect.

Styled Components

Another method for overriding default borderRadius is to create a Styled Component and use it throughout your app.

Simply create a component using useMemo and withStyles hooks that includes borderRadius styling. For example, create a Styled Textfield. This component can then be imported and used in other component.

For an example with full React code, take a look at the link above.

Material-UI Border Utility

The Border Utility is supposed to be an easy way to apply border styling to components. In fact, the docs mention it’s great for “images, buttons, or any other element”.

Unfortunately, I don’t see it working for anything other than the Box component. I attempted on Container and Button without success. As far as I know, there is not a way to compose a custom button that has access to this utility.

When using the Box component, the utility works great.

Below are two examples. They both use the Border Utility and the second takes the borderRadius value from the custom theme (using a shorthand way of doing so).

<Box borderRadius="25%" {...defaultProps}></Box>
<Box borderRadius="borderRadius" {...defaultProps} />

Based on the values I have for my Box size and shapes.borderRadius, this coincidentally produces two identical boxes:

MUI Border Utility

I’ll keep experimenting and see if I can figure out how to use border props for other components.

Resources

Code Sandbox Link

Read more about Typography and Custom Themes.

The Theme Palette is another theme property that can be customized.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.