React MUI styled conditional styling based on component props

Styling React components is an essential aspect of web development, and the Material-UI (MUI) library offers a powerful solution for creating visually appealing user interfaces. In this article, we will explore how to leverage MUI’s styled utility (docs) to apply styles to React components based on their dynamic props. By harnessing the flexibility of MUI’s styling approach, we can easily customize the appearance of our components and create a delightful user experience. So, let’s dive in and discover how to style React components with the MUI styled utility based on component props.

This short tutorial described how you are able to style a component (a button in this example) based on the type of button (we have defined a few types, add, edit, cancel, download, delete).

Let’s get to how we did this;

Take this pretty standard styled button as an example:

import { Button } from '@mui/material'
import { styled } from '@mui/material/styles'
import React from 'react'

interface TestButtonInputProps {
  variant?: 'text' | 'outlined' | 'contained'
  type?: 'add' | 'edit' | 'cancel' | 'download' | 'delete' | 'details'
  title?: string,
  [x: string]: any

}

const ButtonComponent = React.forwardRef<HTMLButtonElement, TestButtonInputProps>(({ variant, title, …rest }, ref) => {
  return (
    <>
      <Button ref={ref} variant={variant} {…rest}>
        {title}
      </Button>
    </>
  )
})

const TestButton = styled(ButtonComponent)({
  backgroundColor: 'red'
})

export default TestButton

We can’t use our component props when it’s written like this. So let’s rewrite it again so that we are able to use the type prop to dynamically give our button a background color. We now have a basic button with a red background color. However, we want to change the color based on the type (add, edit, cancel, download, delete, details) that we pass to this button.

import { Button } from '@mui/material'
import { styled } from '@mui/material/styles'
import React from 'react'

interface TestButtonInputProps {
  variant?: 'text' | 'outlined' | 'contained'
  type?: 'add' | 'edit' | 'cancel' | 'download' | 'delete' | 'details'
  title?: string,
  [x: string]: any
}

const ButtonComponent = React.forwardRef<HTMLButtonElement, TestButtonInputProps>(({ variant, title, …rest }, ref) => {
  return (
    <>
      <Button ref={ref} variant={variant} {…rest}>
        {title}
      </Button>
    </>
  )
})

const TestButton = styled(ButtonComponent)<TestButtonInputProps>(({ type }) => ({
  backgroundColor: 'red'
}))

export default TestButton

As you can see, we have added the <TestButtonInputProps> to the styled component, and have used prop destructuring to get the type property.

Let’s update the code to have a red background when the type is ‘delete’ and a blue background color when the type is ‘add’.

const TestButton = styled(ButtonComponent)<TestButtonInputProps>(({ type }) => ({
  ...(type === 'add' && {
    backgroundColor: 'blue'
  }),
  ...(type === 'delete' && {
    backgroundColor: 'red'
  })
}))

And that’s it:

When we load the two buttons:

<TestButton title='This is a delete button' type='delete' />
<TestButton title='This is an add button' type='add' />

Conclusion: In this article, we explored how to style React components using the MUI styled utility based on component props. By leveraging the flexibility of MUI’s styling approach, we can create visually appealing user interfaces that adapt to dynamic data. The styled utility empowers us to define and apply styles directly within our components, resulting in a more intuitive and maintainable styling process. With MUI’s powerful styling capabilities, we can take our React applications to the next level of elegance and user experience.