makeStyles with TypeScript - 通過道具制作styles解釋

Question

我正在使用 Material-UI makeStyles function 和TypeScript

我在這里找到了如何做到這一點的解決方案並且它正在工作：

export interface StyleProps {
  md?: any;
}

const useStyles = makeStyles<Theme, StyleProps>({
  button: {
    width: ({ md }) => md && '50%',
  }
});

export default useStyles;

但我試圖了解事情是如何運作的。

我不明白<Theme, StyleProps>部分。 我查看了 StackOverflow 上有關此的所有解決方案，沒有人解釋它。

有人可以澄清一下嗎？

謝謝。

Answer 1

這是我對 <Theme, StyleProps> 的簡單解釋

• MaterialUI 的 makeStyles 方法使用泛型類型來定義你可以從他們的主題變量中使用什么，以及你想要分配的道具類型。

• 主題類型導入自：import { Theme } from "@material-ui/core"；

• makeStyles() 返回您可以使用的主題值，“主題”是該主題值的類型定義。

代碼示例：

#1 makeStyles 僅使用主題值：

const useStyles = makeStyles<Theme>((theme) => ({
  button: {
    background: theme.palette.background.paper,
    color: theme.palette.success.light
  }
}));

#2 makeStyles 使用主題值和你的道具：

const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
  button: {
    background: theme.palette.background.paper,
    color: theme.palette.success.light,
    width: ({ md }) => "50%"
  }
}));

#3 makeStyles 只使用你的道具：

const useStyles = makeStyles<any /* <-- it doesn't matter what type u define here, because u doesn't use theme value */, StyleProps>((theme) => ({
 button: {
   width: ({ md }) => "50%",
   background: "grey"
 }
}));

希望這個答案能有所幫助。 :)