React Styled-components TypeScript使用基础样式上的属性扩展样式时出现TS2769错误
React Styled-components是一种流行的前端开发库，它允许开发人员使用JavaScript或TypeScript编写组件样式。当在使用基础样式上扩展样式时，有时会出现TS2769错误。
TS2769错误是TypeScript编译器的类型错误，它表示在扩展样式时出现了类型不匹配的问题。这通常是因为在扩展样式时，使用了不兼容的属性或属性值。
要解决这个问题，可以采取以下步骤：
- 确保正确导入所需的库和类型声明文件。确保已正确安装React、Styled-components和TypeScript，并在文件开头导入它们的类型声明文件。
- 检查基础样式的类型定义。确保基础样式的类型定义与扩展样式的属性匹配。如果基础样式是从其他地方导入的，请确保它们的类型定义正确。
- 检查扩展样式的属性。确保在扩展样式时使用的属性是兼容的。例如，如果基础样式具有
color属性，但扩展样式使用了backgroundColor属性，就会导致类型不匹配的错误。确保属性名称和类型与基础样式一致。 - 使用类型断言。如果确定扩展样式的属性是正确的，但仍然出现类型错误，可以使用类型断言来告诉TypeScript编译器属性的类型。例如，可以使用
as关键字将属性类型断言为正确的类型。
综上所述，React Styled-components TypeScript使用基础样式上的属性扩展样式时出现TS2769错误可能是由于基础样式和扩展样式的属性类型不匹配所致。通过检查类型定义、属性名称和类型，并使用类型断言，可以解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
将react-native和styled-components与TypeScript结合使用， 我想知道styled.TouchableOpacity组件中props.style的类型是什么，以便能够包装它的样式，例如： const Boutton = styled.TouchableOpacity
const Test = () => <Button />
const WrapTest = styled(Test)({
// add styled
}) 为此，我必须使用适当的类型来满足TypeScript： const Test = (props) => &l
浏览 52提问于2021-10-19得票数 1
回答已采纳
3回答
我是TypeScript新手。我有一个下面的组件使用styled-components，我想转换为TypeScript。
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
const propTypes = {
name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline
}
con
浏览 1提问于2019-03-29得票数 12
在我的样式组件上获取类型记录错误
类型'{子:字符串；}‘没有与类型’IntrinsicAttributes‘..ts(2559)相同的属性。
import React from 'react'
import { NotificationSuccess, NotificationError } from '../../styles'
interface IProps {
error?: boolean;
message: string;
}
export const Notification = (props: IProps) =&
浏览 0提问于2019-03-12得票数 36
回答已采纳
2回答
在一个按预期工作的React应用程序中，我有以下样式化的组件：
const BaseButton = styled(Button)<{ borderColor: string }>`
border-color: ${({ borderColor }): string => borderColor};
`;
但是，它在控制台中生成此警告消息：
React不识别DOM元素上的borderColor支柱。如果您有意地希望它作为自定义属性出现在DOM中，则将其拼写为小写bordercolor。如果意外地从父组件传递它，请从DOM元素中删除它。
为了避免这种情况，我尝试实现
浏览 3提问于2019-11-06得票数 3
回答已采纳
使用typescript并希望使用样式化组件为Material UI组件设置样式。
但是显示Type '{ children: string; }' is missing the following properties的StyledComponent会出现类型错误
import React, { PureComponent } from 'react';
import styled from 'styled-components'; // ^4.1.3
import { Button } from '@material-ui/core&
浏览 1提问于2019-02-04得票数 8
我想使用v5和TypeScript引入的disableVendorPrefixes和disableCSSOMInjection。
但是，当我使用它时，有一个打字错误。(TS2769: No overload matches this call.)
@types/styled-components似乎不支持v5，但有什么方法可以使用它们吗？
版本：“样式组件”："^5.0.0“
“@types/styled components”："^4.4.2"，
参考
浏览 0提问于2020-01-29得票数 0
在我的react项目中，我有一个根./styles文件夹，它包含用于样式组件的各种样式对象。我不希望这些文件出现在覆盖测试中。
我试图像这样把它们隐藏起来，但是当我运行npm run coverage时，它们仍然出现。
package.json
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/jest.setup.js"
],
"coveragePathIgnorePatterns": [
"<rootDir>/styl
浏览 1提问于2019-09-01得票数 6
回答已采纳
在Typescript环境中使用StyledComponent的withComponent()方法时，我遇到了麻烦。我有一个简单的样式组件，我想将其应用于React组件。但是Typescript编译器抱怨道具不匹配。
我应该如何使用withComponent()方法来获得一个样式化的组件，它也有我的react组件的道具？
import React from 'react';
import styled from 'styled-components';
const RedBackground = styled.div`
background-color
浏览 92提问于2018-06-01得票数 0
用于从props中提取主题数据的插值函数会产生一个“在函数上缺少返回类型”。eslint错误。我使用声明合并来输入主题数据，如typescript documentation中所述。合并似乎工作正常，因为props.theme是根据我的声明进行类型化的。 可以通过为插值函数指定返回类型来修复此问题 ${(props): string => props.theme.colors.secondary} 但我不认为这是必要的，因为我已经在类型声明文件中指定了props.theme.colors.secondary的类型。此外，在vs代码错误弹出窗口中，返回类型似乎是已知的(function(
浏览 35提问于2019-09-09得票数 5
回答已采纳
我正在尝试设置一个带有样式化组件的CRA/Typescript/Storybook来构建一个组件库，但是当使用样式化组件包时，我的组件样式不会被应用。 这是我的package.json： {
"name": "lib",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing
浏览 21提问于2020-12-22得票数 0
这是一个用React编写的组件，带有处理用户输入的库“样式组件”。如果用户的输入无效，则应显示如下所示的相应样式(类无效)。该示例可以完美地与JavaScript配合使用。但是，使用TypeScript时，我无法让props接口工作。作为一种变通方法，我为styled.div<any>插入了<any>，它解决了这个错误，但当然也违背了TypeScript的目的。错误输出显示在代码之后。
import { useState } from "react";
import styled from 'styled-components';
imp
浏览 13提问于2021-05-21得票数 0
定义为defaultProps的所需道具在使用组件时显示为缺失。
// Button.ts
interface ButtonProps {
size: 'small' | 'medium' | 'large';
inverted: boolean;
raised: boolean;
}
const Button = styled('button')<ButtonProps>`...`
Button.defaultProps = {
size: 'medium',
inverted
浏览 5提问于2019-02-27得票数 4
回答已采纳
1回答
我在一个react native项目中使用styled-components。我也在使用typescript，我安装了软件包，也安装了类型定义，但显示了以下错误： ? 这导致了我的一个错误，因为属性没有被返回。有没有人知道怎么解决？ 下面是我的package.json和我的组件。 "dependencies": {
"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.2",
"expo
浏览 7提问于2021-08-08得票数 3
回答已采纳
在从MUI v4迁移到v5的过程中，我遇到了这个障碍:在v4中，我使用了makeStyles()，但现在我想完全迁移到styled()：我无法让Typescript接受具有to=和component=属性的styled(ListItemButton)(...)。 我看过并阅读过MUI关于Wrapping components的指南，它实际上让我的事情变得更不清楚；诚然，我既不是打字专家，也不是MUI向导。我的困惑是由于指南的例子不完整，比如明显缺少一些非明显的导入，似乎需要导入符号重命名，因此自动补全将不起作用或出现多个候选。 这是一个触发Typescript错误的最小化示例，参见下面的co
浏览 43提问于2021-10-14得票数 1
回答已采纳
以一个用类型记录创建的创建反应应用程序为例：
npx create-react-app myapp --template typescript
cd myapp
npm install styled-components@5.0.1
然后将样式化的组件添加到类型记录文件MyButton.tsx中。
import React from 'react';
import styled from 'styled-components'; // <<<<< THIS LINE CAUSES ERROR
const MyButtonStyl
浏览 3提问于2021-11-09得票数 3
回答已采纳
在使用样式组件和VSCode时，我遇到了一个奇怪的问题。下面基本上是我从任何来自样式组件的组件中得到的，它们都返回任何。
我之前让它工作了，但是我不知道什么时候，我也看不到所有组件返回任何错误的设置中有什么问题。我试图移回tslint配置，删除/注释掉eslintrc文件中的所有规则，但也无法使其工作。
令人惊讶的是，我尝试了我在我的项目中使用的，其中的类型可以与原始设置一起工作。
我尝试使用相同版本的样式化组件包，但仍然不能正常工作。任何关于这个问题的帮助或方向都将非常受欢迎！
.eslintrc.js
module.exports = {
env: {
b
浏览 2提问于2020-08-08得票数 2
我想要一个简单的组件，我可以用来样式和传递一个支柱--元素类型。使用5 of styled-components和4 for TS
但是，我得到以下TS错误
TS误差
No overload matches this call.
Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof HTMLAttributes&l
浏览 14提问于2021-06-14得票数 1
回答已采纳
我的React应用程序未因以下错误而无法编译:找不到规则'@typescript-eslint/consistent-type-assertions‘的定义
我有点不知所措。我在项目中找不到任何当前的规则定义。该项目最初正在编译。这个错误是在我重新构建应用程序后开始的。
应用无法编译，出现错误:找不到规则'@typescript-eslint/consistent-type-assertions‘的定义
packge.json -
{
"name": "client",
"version": "0.1.0"
浏览 1提问于2019-09-21得票数 27
有人能帮我吗？我正在使用TypeScript，StyledComponent和React来创建React应用。此错误发生在生成期间，无法清除。
// browser and terminal error
TypeScript error in ./src/index.tsx(4,1):
Type '{ alt: string; src: string; }' is not assignable to type 'IntrinsicAttributes'.
Property 'alt' does not exist on type '
浏览 2提问于2019-10-10得票数 0
我有一个带样式的按钮：
import { Link } from 'react-router-dom'
import styled from 'styled-components'
const Button = styled(Link)`
display: block;
border: 1px solid white;
padding: 5px;
`
我可以将其用作Link
<Button to='/' />
但有时我想把它当作a使用
<Button as='a' href='/'
浏览 1提问于2018-11-10得票数 6
我有一个简单的按钮组件，我用样式化的组件对它进行样式化，但是我不能向组件发送一个简单的道具，因为TypeScript向No overload matches this call抱怨。
App.tsx
import React from 'react';
import Button from '../form/button';
export const App = (): React.ReactElement => <Button secondary>Click me</Button>;
Button.tsx
import Rea
浏览 3提问于2021-01-16得票数 1
回答已采纳
1回答
我试着将typescript与样式化组件一起使用。我有一个div，里面有一个input组件。 import styled from 'styled-components';
const Input = () => {
return (<div>testing</div>);
};
const Main = styled.div`
display: flex;
height: 100%;
& > ${Input} {
display: none;
}
`; 但是它在控制台上抛出了这个错误。 ? 错
浏览 21提问于2020-03-16得票数 1
回答已采纳
有谁知道为什么Animated.interpolate函数不能处理样式组件..。或者我做错了什么？
环境
6.12.0react-native: 0.62styled-components：Node: 12.13.0npm： ^5.1.1 => => ^5.1.0 => 5.1.0
复制的步骤
react-native-template-typescript 创建了一个新的TypeScript react-带有native的原生项目--本机init MyApp --模板TypeScript。
安装styled-components和@types/styled-componen
浏览 1提问于2020-06-29得票数 1
我正在使用react-datetime和一个react typescript项目。我得到了TS2769编译错误“
TS2769: No overload matches this call.
Overload 1 of 2, '(props: Readonly<DatetimepickerProps>): ReactDatetimeClass', gave the following error.
Type '(inputDate: Moment) => void' is not assignable to type &
浏览 34提问于2019-10-25得票数 1
使用yarn2驱动的monorepo，有两个工作区，common和app。我在root's typescript中宣布react-scripts和typescript为devDependencies，在app's package.json中宣布typescript和react-scripts为peerDependencies。
但是，运行yarn start会出现错误
command not found: react-scripts
知道该怎么做吗？
侧纹
react-脚本有peerDependencies on react，我在根工作区的依赖部分提供了它。
为根附加packa
浏览 18提问于2022-07-13得票数 0
另一个React + TypeScript事件处理程序问题。
如何修复此类型错误？
const onResize = (
event: React.UIEvent<Window, "resize">,
) => {
console.log(event.target);
};
window.addEventListener("resize", onResize);
这抛出了
No overload matches this call.
浏览 14提问于2021-11-03得票数 0
2回答
我正在尝试用Nextjs在一个React项目中实现styled-components。问题是，虽然我可以实现和看到样式，但当我在浏览器上看到它时，会有一个小的延迟。首先，它不使用样式来引导组件，然后在22 is之后应用样式。我做错什么了？谢谢
这是我的密码！
页/index.js
import React from "react";
import Home from "../components/home/index";
const index = () => {
return (
<React.Fragment>
浏览 6提问于2020-01-09得票数 7
回答已采纳
我想我已经知道了这个问题的答案，但是在使用带有styled-components的接口时，我实际上是在尝试覆盖React InputHTMLAttribute import { InputHTMLAttributes } from 'react'
import styled from 'styled-components'
export interface IInputStyles
extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
/**
浏览 95提问于2020-08-20得票数 1
maxbause很好地为Next.js创建了一个很好的样板项目，其中包括GraphQL和TypeScript中的样式组件。
尽管如此，当我将ESLint添加到项目中时，我收到了一些警告和错误，因为原因基本上是简单的JavaScript。
我修复了其中的大部分，但是我在_document.tsx文件中被困住了两个警告。
首先，我在Document< any>的任何部分得到以下警告：“意外的任何。指定不同的类型。”如果我删除任何并且不使用任何东西，未知或从未使用，那么我就会在this.props.styleTags中得到错误。
第二个问题是ctx.renderPage = () =&
浏览 0提问于2020-03-15得票数 2
回答已采纳
我用CRA类型记录模板构建应用程序。
当我使用这段代码时，会出现解析错误。
export type { BaseModalProps } from "./BaseModalProps"
Parsing error: Declaration or statement expected
这些是我的package.json和.eslintrc的一部分
// package.json
"dependencies": {
"@craco/craco": "^5.6.4",
"@material-ui/core"
浏览 7提问于2020-09-13得票数 3
3回答
使用styled-components，对于正常的React.js，我可以这样做：
const Container = styled.div({
userSelect: `none !important`,
})
然而，对于TypeScript，我得到了错误：
Argument of type '{ userSelect: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
Object literal may only specify known prope
浏览 0提问于2019-06-12得票数 4
回答已采纳
2回答
汇总(不排除排除包)
、、、
我正在使用汇总捆绑一些反应组件。组件使用进行样式设计。我在styled-components数组中包含了react和其他一些包。
当我将组件导入到另一个应用程序时，出现了一个错误，该错误声明styled-components在页面上被实例化了两次。在我看来，这是一个与我的汇总配置或汇总本身相关的问题，因为在运行构建过程时，我得到了一些令人困惑的输出。
汇总配置/生成文件
const babel = require('rollup-plugin-babel');
const commonjs = require('rollup-plugin-commonjs');
浏览 0提问于2018-05-31得票数 2
2回答
如果将styled-components添加到React中，则有一个本机组件的子目录，具体如下：
import styled from 'styled-components/native`;
export const Container = styled.View`
...
`;
如果您试图在React本机TypeScript项目中执行此操作，您将遇到以下键入错误：
Could not find a declaration file for module 'styled-components/native'.
解决这一问题的典型方法是在开发工具依赖项中安装@typ
浏览 22提问于2022-06-20得票数 10
回答已采纳
1回答
从其他文件导入样式
、、、、
晚上好!我是新手，对react和styled-components几乎没有经验。我下面有一个样式代码片段，我想在代码的另一部分中重用，而不必反复键入相同的样式命令，我该怎么做呢？我看到了一篇关于如何汇编的文章，但我不能在代码的另一部分中使用它。 此代码片段位于helpers文件夹中的style.jsx文件中。 import { css } from 'styled-components';
const mixins = {
flexCenter: css`
display: flex;
align-items: center;
justify-c
浏览 15提问于2021-08-05得票数 1
我正在构建一个练习表单，并使用useReducer()来管理这个州。我得到的打字错误与它有关，我试过解决它，但没有运气。
完整的代码可以在这里获得(路径: src/components/Input.tsx)：
完全错误：
TypeScript错误在/form/src/components/Input.tsx(47,47)：没有重载匹配此调用。重载5中的1，‘(还原器: ReducerWithoutAction，initializerArg: any，初始化器？：未定义)：any，DispatchWithoutAction'，给出了以下错误。类型的参数“(状态: InputState，
浏览 1提问于2021-06-30得票数 1
1回答
当我使用yarn build自己构建项目时，它正常工作，但是当我构建坞容器时，它会给我类型记录错误。一周前一切都很好。
No overload matches this call.
#12 97.88 Overload 1 of 2, '(props: InfiniteScrollProps | Readonly<InfiniteScrollProps>): InfiniteScroll', gave the following error.
#12 97.88 Type 'React.ReactNode' is not assignab
浏览 4提问于2022-04-18得票数 -1
回答已采纳
我正在尝试创建一个typescript React应用程序，在使用styled-components时遇到了一个问题。下面是我正在尝试的粗略想法： import React from 'react';
import styled from 'styled-components';
export type MyProps = {
wrapper?: React.Component,
};
const DefaultWrapper = styled.div`
background: blue;
`;
const MyComponent = ({wra
浏览 23提问于2020-10-05得票数 0
回答已采纳
我刚从一个react typescript项目开始，我得到了这个隐秘的错误： Failed to compile.
/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
No overload matches this call.
Overload 1 of 2, '(props: {} | Readonly<{}>): NewsFee
浏览 665提问于2021-06-29得票数 1
我正在学习react，我从使用styled-components和react-router dom开始
但我面临着将我的自定义样式组件应用于不是由我创建的现有组件的困难。
代码如下：
import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
const NavStyle = styled.div`
color: red;
margin: 10px;
`;
const Nav
浏览 19提问于2018-09-09得票数 9
回答已采纳
我将三个静态属性(Header、Body和Footer)设置为一个Dialog组件。但是，typescript在样式化组件中包装Dialog组件后抛出以下错误。
Property 'Header' does not exist on type 'StyledComponentClass...
这是我的/Dialog.tsx
import { Dialog as BlueprintDialog, IDialogProps } from '@blueprintjs/core';
import * as React from 'react';
浏览 5提问于2018-07-20得票数 0
回答已采纳
我有一个来自create- React -app的react应用程序，我正在使用typescript和styled-components 我有一台globalStyles import {createGlobalStyle} from 'styled-components';
export const GlobalStyle = createGlobalStyle`
@font-face {
font-family: 'modernline';
font-style: normal;
font-weig
浏览 17提问于2020-07-24得票数 0
如何访问ref param of InputLabel of @material-ui/core in TypeScript？
下面的代码会导致错误，ref说：
TS2769:没有重载匹配此调用。
export class ComboBox extends React.Component<ComboBoxProps, ComboBoxState> {
private inputLabelRef = React.createRef();
public render() {
return <FormControl fullWidth={thi
浏览 1提问于2020-01-18得票数 4
我根据href类型添加了一些条件样式。由于某些原因，如果我将我的as添加到Button styled-component中，我会收到TS错误：Type 'string' is not assignable to type 'undefined'. TS2769 组件 interface LinkProps {
to: string;
target?: string;
as?: string;
className?: string;
children: ReactChildren | React.ReactNode | string;
}
浏览 923提问于2021-07-02得票数 0
回答已采纳
我得到了这个错误，尽管在项目中没有一行:first-child，为什么会出现？
......................................................................................................................................................................................................................................................
"depe
浏览 13提问于2019-07-28得票数 2
我有一个冲突的规则。当我在多行JSX两边加上括号时，prettier报告了一个错误Delete `(` eslint (prettier/prettier)。
但是如果我去掉圆括号，我会得到另一个eslint错误Missing parentheses around multilines JSX eslint(react/jsx-wrap-multilines)
<ScreenLayout
content={( <--------- problems here
<Component
// any props...
/
浏览 1提问于2021-02-02得票数 4
我刚刚开始研究在JavaScript React web应用程序中使用样式组件，我想知道是否可以使用基于类的样式组件。例如： Functional (works)： import styled from 'styled-components';
const Header = styled.header`
color: blue;
`;
export default Header;
.
.
.
(in another file)
import React, {Component} from 'react';
import Header from
浏览 6提问于2018-12-26得票数 1
回答已采纳
2回答
我正在尝试实现一个搜索栏，同时使用样式组件库进行样式化。我的问题是，如果我使用样式化的组件，被查询的值永远不会改变。这是我的密码
import styled from 'styled-components'
import React, from 'react'
const SearchBar = styled.input`
margin-top: 35px;
float: right;
`
class Header extends React.Component {
state = {
query: '',
}
浏览 0提问于2018-08-31得票数 0
回答已采纳
我正在创建一个内部NPM包，其中包含了所有ReactJS web应用程序的基本布局。在这个包中，我使用样式组件来格式化组件，并使用汇总来构建包。在目标应用程序中也使用样式组件。
下面是配置文件：
packages.json
{
....
"dependencies": {
"@azure/msal-browser": "^2.7.0",
"@microsoft/microsoft-graph-client": "^2.1.1",
"@microsoft/mic
浏览 3提问于2020-11-27得票数 0
回答已采纳
我有一个用styled-components和export a theme制作的模块 我希望将从模块导出的样式主题与我的应用程序主题相结合。 我已经在theme.ts中尝试了以下内容 import { theme as idCheckTheme } from '@pass-culture/id-check/src/theme'
import { DefaultTheme } from 'styled-components/native'
import './styled.d'
export const theme: DefaultTheme
浏览 15提问于2021-08-27得票数 2
回答已采纳
一些react组件将className道具传递给子组件。我认为没有必要将className作为我的项目的支柱。
为什么使用这个className道具？我应该在什么时候采取这种方法？
import styled from 'styled-components'
const ReactComponent = ({ className }) => {
return <div className={className}/>
}
const StyledComponent = styled(ReactComponent)``;
浏览 3提问于2020-06-24得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
