在带有typescript的material ui中使用makeStyles
在带有typescript的material ui中使用makeStyles
提问于 2021-02-08 20:51:54
我正在尝试将JavaScript模板转换为Typescript。所以我的accordionStyle.ts如下所示
import {
primaryColor,
grayColor
} from "../../material-dashboard-pro-react";
const accordionStyle = (theme?:any) => ({
root: {
flexGrow: 1,
marginBottom: "20px"
},
expansionPanel: {
boxShadow: "none",
"&:before": {
display: "none !important"
}
},
expansionPanelExpanded: {
margin: "0 !important"
},
expansionPanelSummary: {
minHeight: "auto !important",
backgroundColor: "transparent",
borderBottom: "1px solid " + grayColor[5],
padding: "25px 10px 5px 0px",
borderTopLeftRadius: "3px",
borderTopRightRadius: "3px",
color: grayColor[2],
"&:hover": {
color: primaryColor[0]
}
},
expansionPanelSummaryExpaned: {
color: primaryColor[0],
"& $expansionPanelSummaryExpandIcon": {
[theme.breakpoints.up("md")]: {
top: "auto !important"
},
transform: "rotate(180deg)",
[theme.breakpoints.down("sm")]: {
top: "10px !important"
}
}
},
expansionPanelSummaryContent: {
margin: "0 !important"
},
expansionPanelSummaryExpandIcon: {
[theme.breakpoints.up("md")]: {
top: "auto !important"
},
transform: "rotate(0deg)",
color: "inherit",
position: "absolute",
right: "20px",
[theme.breakpoints.down("sm")]: {
top: "10px !important"
}
},
expansionPanelSummaryExpandIconExpanded: {},
title: {
fontSize: "15px",
fontWeight: "bolder",
marginTop: "0",
marginBottom: "0",
color: "inherit"
},
expansionPanelDetails: {
padding: "15px 0px 5px"
}
});
export default accordionStyle;我正在尝试将上面的样式导入到我的组件中，如下所示。
import styles from "../../assets/jss/material-dashboard-pro-react/components/accordionStyle";
const useStyles = makeStyles(styles);以上几行代码在Javascript中运行良好。从这一行--> const useStyles = makeStyles(styles);我得到下面的typescript错误
No overload matches this call.
Overload 1 of 2, '(style: Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">, options?: Pick<...> | undefined): (props?: any) => Record<...>', gave the following error.
Argument of type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to parameter of type 'Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
Type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
Call signature return types '{ root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { minHeight: string; ... 6 more ...; "&:hover": { ...; }; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' and 'Record<"root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails", CSSProperties | ... 1 more ... | PropsFunc<...>>' are incompatible.
The types of 'expansionPanelSummaryExpandIcon' are incompatible between these types.
Type '{ [x: number]: { top: string; }; transform: string; color: string; position: string; right: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
Type '{ [x: number]: { top: string; }; transform: string; color: string; position: string; right: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "relative" | "static" | "sticky" | PropsFunc<{}, "inherit" | "absolute" | "-moz-initial" | ... 8 more ... | undefined> | undefined'.
Overload 2 of 2, '(styles: Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">, options?: Pick<...> | undefined): (props: {}) => Record<...>', gave the following error.
Argument of type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to parameter of type 'Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
Type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.那么如何在typescript中为"makeStyles“添加”样式“呢？
回答 2
Stack Overflow用户
发布于 2021-08-23 05:34:19
您必须将其添加到tsconfig.json中
{
"compilerOpti`enter code here`ons": {
"lib": ["es6", "dom"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true
}
}并使用相同的样式:第一次导入此
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; 然后这样做
const useStyles = makeStyles((theme: Theme) => createStyles({
root:{
backgroundColor : '#f9f9f9',
}});Stack Overflow用户
发布于 2021-02-08 21:41:50
您应该像这样使用makeStyles：
const accordionStyle = makeStyles((theme?: any) => ({然后声明类：
const classes = accordionStyle();在组件中使用：
<h1 className={classes.test}>Hello CodeSandbox</h1>示例：https://codesandbox.io/s/cold-river-n21g9?file=/src/App.tsx:1901-1959
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66102018
复制相关文章
相似问题
腾讯云开发者
