[Solved]-Passing props to MUI styles-Reactjs

Here's 2 full working examples of how to pass props to MUI v5 styles. Either using css or javascript object syntax.

With css syntax:

import { styled } from '@mui/system'

interface Props {
  myColor: string
}

const MyComponent = ({ myColor }: Props) => {
  const MyStyledComponent = styled('div')`
    background-color: ${myColor};

    .my-paragraph {
      color: white;
    }
  `
  return (
    <MyStyledComponent >
      <p className="my-paragraph">Hello there</p>
    </MyStyledComponent >
  )
}

export default MyComponent

Note that we define MyStyledComponent within MyComponent, making the scoped props available to use in the template string of the styled() function.

Same thing with javascript object syntax:

import { styled } from '@mui/system'

const MyComponent = ({ className }: any) => {
  return (
    <div className={className}>
      <p className="my-paragraph">Hello there</p>
    </div>
  )
}

interface Props {
    myColor: string
  }

const MyStyledComponent = styled(MyComponent)((props: Props) => ({
  backgroundColor: props.myColor,
  '.my-paragraph': { color: 'white' },
}))

export default MyStyledComponent

For this second example, please note how we pass the className to the component we want to apply the styles to. The styled() function will pass a className prop with the styles you define. You typically want to apply that to your root element. In this case the div.

Result:

I'm sure there's other variations of how to do this, but these two are easy to implement and understand.

You might need to memoize the calculated styles, and maybe not use this approach if your props changes a lot. I don't think it's very performant.

Solution for TypeScript with Class Component:

type PropsBeforeStyle = {
  propA: string;
  propB: number;
}

const styles = (theme: Theme) => createStyles({
  root: {
    color: (props: PropsBeforeStyle) => {}
  }
});

type Props = PropsBeforeStyle & WithStyles<typeof styles>;

class MyClassComponent extends Component<Props> {...}

export default withStyles(styles)(MyClassComponent);

Here's another way of dynamically passing props to hook's API in MUI v5

import React from "react";
import { makeStyles } from "@mui/styles";
import { Theme } from "@mui/material";

interface StyleProps {
  height: number;
  backgroundColor: string;
}

const useStyles = makeStyles<Theme>((theme) => ({
  root: ({ height, backgroundColor }: StyleProps) => ({
    background: backgroundColor,
    height: height
  })
}));

export default function Hook() {
  const props = {
    height: 58,
    backgroundColor: "red"
  };

  const classes = useStyles(props);
  return (
    <button className={classes.root}>
      another way of passing props to useStyle hooks
    </button>
  );
}

here's the codesandbox https://codesandbox.io/s/styles-with-props-forked-gx3bf?file=/demo.tsx:0-607

I spent a couple of hours trying to get withStyles to work with passing properties in Typescript. None of the solutions I found online worked with what I was trying to do, so I ended up knitting my own solution together, with snippets from here and there.

This should work if you have external components from, lets say Material UI, that you want to give a default style, but you also want to reuse it by passing different styling options to the component:

import * as React from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import { TableCell, TableCellProps } from '@material-ui/core';

type Props = {
    backgroundColor?: string
}

const useStyles = makeStyles<Theme, Props>(theme =>
    createStyles({
        head: {
            backgroundColor: ({ backgroundColor }) => backgroundColor || theme.palette.common.black,
            color: theme.palette.common.white,
            fontSize: 13
        },
        body: {
            fontSize: 12,
        },
    })
);

export function StyledTableCell(props: Props & Omit<TableCellProps, keyof Props>) {
    const classes = useStyles(props);
    return <TableCell classes={classes} {...props} />;
}

It may not be the perfect solution, but it seems to work. It's a real bugger that they haven't just amended withStyles to accept properties. It would make things a lot easier.

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    }
  }
});

export function MyButton(props) {
  const classes = useStyles({color: 'red', hover: 'green'});
  return <Button className={classes.root}>My Button</Button>;
}

@mui v5

You can use styled() utility (Make sure that you're importing the correct one) and shouldForwardProp option. In the following example SomeProps passed to a div component

import { styled } from '@mui/material'

interface SomeProps {
  backgroundColor: 'red'|'blue',
  width: number
}
const CustomDiv  = styled('div', { shouldForwardProp: (prop) => prop !== 'someProps' })<{
  someProps: SomeProps;
}>(({ theme, someProps }) => {
  return ({
    backgroundColor: someProps.backgroundColor,
    width: `${someProps.width}em`,
    margin:theme.spacing(1)
  })
})

Was missing from this thread a props use within withStyles (and lead to think it wasn't supported)

But this worked for me (say for styling a MenuItem):

const StyledMenuItem = withStyles((theme) => ({
 root: {
  '&:focus': {
    backgroundColor: props => props.focusBackground,
    '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
      color: props => props.focusColor,
    },
  },
 },
}))(MenuItem);

And then use it as so:

 <StyledMenuItem focusColor={'red'} focusBackground={'green'}... >...</StyledMenuItem>

In MUI v5, this is how you access the props when creating the style object using styled():

import { styled } from "@mui/material";

const StyledBox = styled(Box)(({ theme, myColor }) => ({
  backgroundColor: myColor,
  width: 30,
  height: 30
}));

For folks who use typescript, you also need to add the prop type to the CreateStyledComponent:

type DivProps = {
  myColor: string;
};

const Div = styled(Box)<DivProps>(({ theme, myColor }) => ({
  backgroundColor: myColor,
  width: 30,
  height: 30
}));

<StyledBox myColor="pink" />

If you want to use system props in your custom component like Box and Typography, you can use extendSxProp like the example below:

import { unstable_extendSxProp as extendSxProp } from "@mui/system";

const StyledDiv = styled("div")({});

function DivWithSystemProps(inProps) {
  const { sx } = extendSxProp(inProps);
  return <StyledDiv sx={sx} />;
}

<DivWithSystemProps
  bgcolor="green"
  width={30}
  height={30}
  border="solid 1px red"
/>

Explanation

• styled("div")(): Add the sx props to your custom component
• extendSxProp(props): Gather the top level system props and put it inside the sx property:

const props = { notSystemProps: true, color: 'green', bgcolor: 'red' };
const finalProps = extendSxProp(props);

// finalProps = {
//   notSystemProps: true,
//   sx: { color: 'green', bgcolor: 'red' }
// }

To use with typescript, you need to add the type for all system properties:

type DivSystemProps = SystemProps<Theme> & {
  sx?: SxProps<Theme>;
};

function DivWithSystemProps(inProps: DivSystemProps) {
  const { sx, ...other } = extendSxProp(inProps);
  return <StyledDiv sx={sx} {...other} />;
}

Here's the official Material-UI demo.

And here's a very simple example. It uses syntax similar to Styled Components:

import React from "react";
import { makeStyles, Button } from "@material-ui/core";

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    }
  },
  label: { fontFamily: props => props.font }
});

export function MyButton(props) {
  const classes = useStyles(props);
  return <Button className={classes.root} classes={{ label: classes.label }}>My Button</Button>;
}


// and the JSX...
<MyButton color="red" hover="blue" font="Comic Sans MS" />

This demo uses makeStyles, but this feature is also available in styled and withStyles.

This was first introduced in @material-ui/styles on Nov 3, 2018 and was included in @material-ui/core starting with version 4.

Here the Typescript solution:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import {Theme} from '@material-ui/core';

export interface StyleProps {
    height: number;
}

const useStyles = makeStyles<Theme, StyleProps>(theme => ({
  root: {
    background: 'green',
    height: ({height}) => height,
  },
}));

export default function Hook() {

  const props = {
    height: 48
  }

  const classes = useStyles(props);
  return <Button className={classes.root}>Styled with Hook API</Button>;
}

If you want to play with it, try it in this CodeSandbox

Solution for how to use both props and theme in material ui :

const useStyles = props => makeStyles( theme => ({
    div: {
        width: theme.spacing(props.units || 0)  
    }
}));

export default function ComponentExample({ children, ...props }){
    const { div } = useStyles(props)();
    return (
        <div className={div}>{children}</div>
    );
}

Deleted the old answer, because it's no reason for existence.

Here's what you want:

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={`${firstStyle} ${secondStyle}`}>
            {children}
        </div>
    )
}

export default MyComponent;

Now you can use it like:

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>

Official Documentation