[英]styled-components typescript error with Material-UI component
Using typescript and want to set styling for Material UI component with styled-components. 使用typescript并希望为带有样式组件的Material UI组件设置样式。
But type error happens with StyledComponent showing Type '{ children: string; }' is missing the following properties
但是StyledComponent显示
Type '{ children: string; }' is missing the following properties
Type '{ children: string; }' is missing the following properties
import React, { PureComponent } from 'react';
import styled from 'styled-components'; // ^4.1.3
import { Button } from '@material-ui/core'; // ^3.9.1
class TestForm extends PureComponent {
render() {
return (
<>
<Button style={{ backgroundColor: 'red' }}>Work</Button>{/* OK */}
<StyledButton>Doesn't work</StyledButton>{/* Type Error happens here <=============== */}
{/**
Type '{ children: string; }' is missing the following properties from type 'Pick<Pick<(ButtonProps & RefAttributes<Component<ButtonProps, any, any>>) | (ButtonProps & { children?: ReactNode; }), "form" | "style" | "title" | "disabled" | "mini" | ... 279 more ... | "variant"> & Partial<...>, "form" | ... 283 more ... | "variant">': style, classes, className, innerRef [2739]
*/}
</>
);
}
}
const StyledButton = styled(Button)`
background: blue;
`;
export default TestForm;
It is showing children prop is missing. 它显示儿童道具失踪。
I have tried the following too but still doesn't work. 我也试过以下但仍然无效。
const StyledButton = styled(Button)<{ children: string; }>`
background: blue;
`;
Does anyone know how to use Material UI with styled-components in typescript? 有没有人知道如何在打字稿中使用带有样式组件的Material UI?
I'm also getting this error with material-ui
v3.9.3 and styled-components
v4.2.0 , the latest versions at the time of posting this answer. 我也在使用
material-ui
v3.9.3和styled-components
v4.2.0时收到此错误,这是发布此答案时的最新版本。
My workaround for this is the following 我的解决方法如下
import styled from 'styled-components'
import Button, { ButtonProps } from '@material-ui/core/Button'
const StyledButton = styled(Button)`
background: blue;
` as React.ComponentType<ButtonProps>
This casts StyledButton
to the same type as the Material UI Button
. 这会将
StyledButton
转换为与Material UI Button
相同的类型。 It removes the error and gives you the same type checking as you get for Button
. 它会删除错误,并为您提供与
Button
相同的类型检查。 In most cases this is all you want. 在大多数情况下,这就是你想要的。
In cases where you need additional props to use in the styles, and want to enforce they are passed, you can just extend ButtonProps
and cast to that custom type: 如果您需要在样式中使用其他道具,并希望强制执行它们,则可以将
ButtonProps
扩展并转换为该自定义类型:
type StyledButtonProps = ButtonProps & { background: string }
const StyledButton = styled(Button)`
background: ${(props: StyledButtonProps) => props.background};
` as React.ComponentType<StyledButtonProps>
const MyComponent = () => (
<div>
<StyledButton size='small' background='blue'>one</StyledButton>
// ERROR HERE - forgot the 'background' prop
<StyledButton size='small'>two</StyledButton>
</div>
)
This was working fine a few months ago, but I just started a new project and am having the same issue. 这几个月前工作正常,但我刚开始一个新项目,我遇到了同样的问题。 Must be a problem with the more recent versions.
必须是更新版本的问题。
Horrible, I know, but in the meantime maybe best to: 可怕,我知道,但与此同时最好:
const StyledButton: any = styled(Button)`
background: blue;
`;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.