How to pass props to createStyles in React

Question

right now I want to create a component, and pass color and value to the component from its parent. Here, more specifically, I want to pass color to styles, so that I can change color according to parent component. But I got error: Error TS2339: Property 'color' does not exist on type '{}'.

import React,{FC} from "react";
import {createStyles, makeStyles} from "@material-ui/core/styles";
import {BackstageTheme} from "@backstage/theme";
import {LinearProgress} from "@material-ui/core";


interface OverallHealthProps {
    color?: String;
    value?: number;
}

const useStyles = makeStyles<BackstageTheme>(() =>
    createStyles({
        overAllHealthRoot: {
            height: 30,
            borderRadius: 0
        },
        overAllHealthColorPrimary: {
            //TODO: change color according to theme
            backgroundColor: "#A9A9A9"
        },
        overAllHealthBar: {
            borderRadius: 0
        },
        overAllHealthBarColorPrimary: {
            //Error TS2339: Property 'color' does not exist on type '{}'.
            backgroundColor: props => props.color,
        }
    })

)

const RatingBar: FC<OverallHealthProps> = (props:OverallHealthProps) =>{
    const classes =  useStyles(props);
    return(
        <LinearProgress
            variant="determinate"
            value={props.value}
            classes={{
                root: classes.overAllHealthRoot,
                colorPrimary: classes.overAllHealthColorPrimary,
                bar: classes.overAllHealthBar,
                barColorPrimary: classes.overAllHealthBarColorPrimary
            }}
        />
    )
};


export default RatingBar;

Also I tried this:

const useStyles = makeStyles<BackstageTheme, OverallHealthProps>((BackstageTheme, props:OverallHealthProps)=>
    createStyles({
        overAllHealthRoot: {
            height: 30,
            borderRadius: 0
        },
        overAllHealthColorPrimary: {
            //TODO: change color according to theme
            backgroundColor: "#A9A9A9"
        },
        overAllHealthBar: {
            borderRadius: 0
        },
        overAllHealthBarColorPrimary: {
            //Error TS2339: Property 'color' does not exist on type '{}'.
            backgroundColor: props.color,
        }
    })

)

and get error :

TS2345: Argument of type '(theme: BackstageTheme, props: OverallHealthProps) => any' is not assignable to parameter of type 'Styles<BackstageTheme, OverallHealthProps, string>'. Type '(theme: BackstageTheme, props: OverallHealthProps) => any' is not assignable to type 'StyleRulesCallback<BackstageTheme, OverallHealthProps, string>'.

so how to fix this?

bmalbusca bmalbusca · Accepted Answer · 2021-04-26T14:40:50

Just pass a default color props value to your arrow function. The problem is located at the initialisation because non color is passed to your function. Try something like this: makeStyles<BackstageTheme>(({color = "<something>" }) => ... After you passed the props, the new value will take place.

How to pass props to createStyles in React

1 Answers