如何使用Material和TypeScript将自定义道具传递给样式化组件？
如何使用Material和TypeScript将自定义道具传递给样式化组件？
提问于 2021-06-29 03:19:40
我正在使用TypeScript(v4.2.3)和Material (v4.11.3)，并试图将自定义道具传递给styled组件。
import React from 'react';
import {
IconButton,
styled,
} from '@material-ui/core';
const NavListButton = styled(IconButton)(
({ theme, panelOpen }: { theme: Theme; panelOpen: boolean }) => ({
display: 'inline-block',
width: 48,
height: 48,
borderRadius: 24,
margin: theme.spacing(1),
backgroundColor: panelOpen ? theme.palette.secondary.dark : 'transparent',
}),
);
...
const Component: React.FC<Props> = () => {
return (
<NavListButton panelOpen={true} />
);
};这很好，但是如果我检查控制台，它将面临一个错误。
Warning: React does not recognize the `panelOpen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `panelopen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at button
at ButtonBase ...如何摆脱这种不使用样式-组件模块，需要使用styled的材料UI？
这也是另一个类似的问题。
TypeError: Cannot read property 'addRule' of null说，我想将媒体查询添加到样式化的组件中。
const PrintableTableContainer = styled(TableContainer)(() => ({
'@media print': {
'@page': { size: 'landscape' },
},
}));
我也试过这个。
const PrintableTableContainer = styled(TableContainer)`
@media print {
@page { size: landscape }
}
`;但它也说
Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'CreateCSSProperties<(value: string, index: number, array: readonly string[]) => unknown> | ((props: { theme: Theme; } & ((value: string, index: number, array: readonly string[]) => unknown)) => CreateCSSProperties<...>)'.
Type 'TemplateStringsArray' is not assignable to type 'CreateCSSProperties<(value: string, index: number, array: readonly string[]) => unknown>'.
Types of property 'filter' are incompatible.
...回答 1
Stack Overflow用户
发布于 2021-06-30 10:27:55
只是我的两分钱，希望我提供的解决方案能帮到你。
主要原因是材料ui版本，您的项目可能与版本4和版本5混在一起。
1:安装材料-ui v5
@next版本= v5- 安装使用样式组件的材料-ui和样式引擎。
// npm
npm install @material-ui/core@next @material-ui/styled-engine-sc@next styled-components
npm install --save-dev @types/styled-components
// yarn
yarn add @material-ui/core@next @material-ui/styled-engine-sc@next styled-components
yarn add --dev @types/styled-components2: Install app-re有线
默认的资料-ui styled-engine指向emotion，所以我们需要覆盖webpack配置来引用样式的组件。
官方医生解释了如何在material中使用样式组件：
对于create-react-app，安装react-app-rewired
// npm
npm install --save-dev react-app-rewired customize-cra
// yarn
yarn add --dev react-app-rewired customize-cra3:覆盖webpack配置
- 创建
config-overrides.js - 将样式引擎路径重写为指向样式引擎sc路径
// config-overrides.js
const { addWebpackAlias, override } = require('customize-cra');
module.exports = override(
addWebpackAlias({
'@material-ui/styled-engine': '@material-ui/styled-engine-sc',
}),
);4:现在您可以使用带有样式组件的资料-ui。
import { IconButton, styled, TableContainer, Theme } from "@material-ui/core";
const NavListButton = styled(IconButton)(
({ theme, $panelOpen }: { theme?: Theme, $panelOpen: boolean }) => ({
display: "inline-block",
width: 48,
height: 48,
borderRadius: 24,
margin: theme?.spacing(1),
backgroundColor: $panelOpen ? theme?.palette.secondary.dark : "transparent"
})
);
const PrintableTableContainer = styled(TableContainer)(() => ({
"@media print": {
"@page": { size: "landscape" }
}
}));
...
<NavListButton $panelOpen={true} />
<PrintableTableContainer />关于第一个问题，React does not recognize the `panelOpen` prop on a DOM element.。
样式-组件提供一个临时道具- ，以避免自定义道具传递给DOM。
https://styled-components.com/docs/api#transient-props
A 演示git回购 作为您的参考和交叉检查，以防您无法使其工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68172215
复制相关文章
相似问题
腾讯云开发者
