如何在 React 中将 props 传递给 createStyles

Question

现在我想创建一个组件，并将颜色和值从其父组件传递给组件。在这里，更具体地说，我想将颜色传递给样式，以便我可以根据父组件更改颜色。但我收到错误：错误 TS2339：类型“{}”上不存在属性“颜色”。

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;

我也试过这个：

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,
        }
    })

)

并得到错误：

TS2345：“（主题：BackstageTheme，道具：OverallHealthProps）=> any”类型的参数不可分配给“样式”类型的参数。类型“（主题：BackstageTheme，道具：OverallHealthProps）=> any”不可分配给类型“StyleRulesCallback”。

那么如何解决这个问题？

Answer 1

只需将默认颜色道具值传递给您的箭头函数。问题在于初始化，因为非颜色传递给您的函数。试试这样：makeStyles<BackstageTheme>(({color = "<something>" }) => ... 在你传递了 props 之后，新的值就会发生。