React + Typescript :字符串错误:类型‘TypeScript’没有与类型'CSSProperties‘相同的属性
React是一个用于构建用户界面的JavaScript库，而TypeScript是一种静态类型检查的JavaScript超集。在React中使用TypeScript可以提供更好的类型安全性和开发体验。
字符串错误:类型‘TypeScript’没有与类型'CSSProperties‘相同的属性是一个编译时错误，它表示在使用TypeScript时，将一个类型为TypeScript的变量赋值给了类型为CSSProperties的变量，但两者的属性不匹配。
解决这个错误的方法是确保赋值的对象具有与目标类型相匹配的属性。在React中，CSSProperties是一个表示CSS样式属性的接口，它定义了一组常见的CSS属性，如color、fontSize、margin等。因此，要解决这个错误，需要检查赋值的对象是否具有与CSSProperties接口定义的属性相匹配的属性。
以下是一个示例代码，演示了如何使用React和TypeScript来解决这个错误：
import React from 'react';
interface MyComponentProps {
style: React.CSSProperties;
}
const MyComponent: React.FC<MyComponentProps> = ({ style }) => {
return <div style={style}>Hello, World!</div>;
};
const App: React.FC = () => {
const myStyle: React.CSSProperties = {
color: 'red',
fontSize: '16px',
margin: '10px',
};
return <MyComponent style={myStyle} />;
};
export default App;在上面的代码中，我们定义了一个名为MyComponent的组件，它接受一个style属性，类型为React.CSSProperties。在App组件中，我们创建了一个名为myStyle的变量，并将其赋值为一个具有与CSSProperties接口定义的属性相匹配的对象。然后，我们将myStyle作为属性传递给MyComponent组件。
这样，我们就解决了字符串错误:类型‘TypeScript’没有与类型'CSSProperties‘相同的属性的问题，并且使用了React和TypeScript来构建一个具有样式的组件。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
相关·内容
我有一个名为“Webpack”、“Typescript”和“React Hooks”的项目，在这个项目中我使用CSS- in -js将样式传递给div。当我将鼠标悬停在Menu组件中的style属性上时，我得到了以下错误。我不确定应该在哪里绑定CSSProperties。
(JSX attribute) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties
Type '{ display: string; margin: number; padding: number; alignItems: st
浏览 3提问于2021-03-01得票数 2
我想使用typescript在react-native中创建一个可重用的组件。大多数情况下，我将这种方式用作一个简单的原生react项目。这一次我想使用TypeScript而不是JavaScript。我该怎么做呢？
import React from 'react'
import { Text, StyleSheet, Platform } from 'react-native'
import { RFValue } from "react-native-responsive-fontsize";
const AppText = ({ chil
浏览 2提问于2021-03-02得票数 0
我目前正在尝试创建一个React，它返回带有一些属性的CSS样式对象。但是出现了错误，我不知道为什么，但我想是因为对象太复杂，无法计算，还是我完全错了？
错误消息
表达式产生的联合类型太复杂，无法表示。ts(2590)
import React from 'react';
interface Test {
color?: string;
backgroundColor?: string;
border?: string;
}
export const func = (prop: Test): React.CSSProperties => {
浏览 10提问于2022-06-09得票数 1
回答已采纳
我正在尝试创建一个CSS样式对象(在React with Typescript中)，它是由React.CSSProperties类型的其他对象组成的。当我使用一个接口来声明一个键/值对象类型时，我得到了每个对象中React.CSSProperties的智能，但是我失去了样式对象属性的智能。
interface IStyleMap {
[key: string]: React.CSSProperties;
}
const styles: IStyleMap = {
text1: {
fontFamily: "sans-serif",
te
浏览 2提问于2018-10-13得票数 1
我来自javascript世界，是typescript的新手。我有一个用typescript编写的react项目。我声明了一个内联样式，但当我在react组件中使用它时，得到了以下警告：
Type '{ color: string; fontSize: string; fontWeight: number; }' is not assignable to type 'CSSProperties'.
下面是样式声明的代码。
const styles = {
promAlert: {
display: 'flex',
浏览 3提问于2018-06-21得票数 19
回答已采纳
在使用来自@typescript-eslint的Transition组件时，我有各种react-transition-group错误。
我遵循了JS的官方小示例，但是在我的项目中使用了TypeScript + ESLint，我得到了以下错误：Unsafe assignment of an any value。
另一个相关的错误是element implicitly has an 'any' type because expression of type 'string' can't be used to index type。
const transit
浏览 0提问于2020-12-22得票数 0
我正在使用Material-UI来创建一个React & Typescript网站。到目前为止，它工作得很好，但我有一个非常具体的问题。我正在尝试使用其中一个代码示例，但它似乎不适用于Typescript： https://material-ui.com/components/app-bar/#fixed-placement 具体来说： const useStyles = makeStyles(theme => ({
offset: theme.mixins.toolbar,
})); 生成以下错误： (property) Mixins.toolbar: React.C
浏览 15提问于2020-02-01得票数 0
回答已采纳
我有一个函数react元素，如下所示
import { CSSProperties } from 'styled-components'
export interface StylesDictionary {
[Key: string]: CSSProperties
}
interface Props {
onClick: () => void
buttonStyle?: StylesDictionary
}
export default function PreviewButton({ onClick, buttonStyle }: Props) {
当我试
浏览 0提问于2020-09-04得票数 1
我正在尝试将一个带有一些道具的功能组件发送到另一个组件，并在接收组件中尝试键入检查该组件中的一些道具。代码如下：
// BaseButton.tsx
export type ButtonProps = {
label: string
size?: 'sm' | 'md' | 'lg' | 'normal'
icon?: React.FC<{ size?: number; foo: string }>
} & React.ButtonHTMLAttributes<HTMLButtonEleme
浏览 23提问于2020-05-15得票数 2
回答已采纳
1回答
我正在转换一个资料UI仪表板，以对类型记录作出反应，并且遇到了Typescript编译失败但该属性满足错误报告中的标准的问题。短版本:编译此linksStyle.jsx文件
const linksStyle = theme => ({
searchButton: {
top: "-50px !important",
marginRight: "22px",
float: "right"
}
});
export default linksStyle;
报告此错误：
TypeScript error in C
浏览 2提问于2020-03-17得票数 1
回答已采纳
我的react代码：
import React from 'react';
import withStyles from "react-jss";
const styles = {
box: {
border: "2px solid #000"
}
};
interface ComponentProps {}
class Welcome extends React.Component<ComponentProps> {
render() {
const {cla
浏览 7提问于2021-11-19得票数 0
1回答
我使用React.CSSProperties创建css变量，这样我就可以创建如下
let css: React.CSSProperties = {
position: "relative",
display: "inline-block",
background: "red"
}
我正在尝试创建一个主题，它将在根级具有css变量，或者嵌套在诸如size(sm，md，lg)或变体(light，黑夜)等内部修饰符中，或者如下所示。
let theme: MyTheme = {
background: "red",
浏览 0提问于2019-05-09得票数 0
回答已采纳
我使用TypeScript输入以下内容： const k = {
container: {
width: '100%',
},
} 当我使用智能感知时，TypeScript发现我的对象k有一个名为container的属性似乎很酷。它工作得很好。现在，我想限制属性的值，所以我声明了一个接口： interface StyleSet {
[key: string]: React.CSSProperties
} 现在我将类型添加到前面的对象中，所以我们有： const k: StyleSet = {
container: {
width: '10
浏览 48提问于2020-09-17得票数 0
我正在尝试更改的样式选项(特别是试图摆脱边框并更改字体和文本颜色)，但不确定如何修复TypeScript错误。我有以下代码：
import React, {useState} from 'react';
import Select, { ValueType } from 'react-select';
type OptionType = {
value: string;
label: string;
};
const LanguageSelector = () => {
const languageOptions: Opti
浏览 4提问于2021-03-05得票数 1
我尝试输入以下两个传递给Row函数的参数。 //https://github.com/bvaughn/react-window
import * as React from "react";
import styled from "styled-components";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
const StyledSection =
浏览 36提问于2020-12-08得票数 1
回答已采纳
3回答
我想定义一个在自身上是递归的类型，本质上是这样的：
interface CSSProperties {
marginLeft?: string | number
[key: string]?: CSSProperties
}
不幸的是，说：
虽然字符串索引签名是描述“字典”模式的一种强大方法，但它们也强制要求所有属性都与其返回类型匹配。这是因为字符串索引声明obj.property也可以作为obj“属性”使用。在下面的示例中，name的类型与字符串索引的类型不匹配，类型检查器提供了一个错误：
这似乎是说，这是不可能表达在打字，这似乎是一个严重的限制。Flow做了我在这里认为正确
浏览 4提问于2017-04-11得票数 8
1回答
尝试用TypeScript编写一个自定义的react钩子，该钩子接受一个带有所有可选React.CSSProperties作为键的对象，如下所示... const something = useSomthing({
color: {
initial: 'red',
new: 'blue'
}
}) 我能以一种在IDE自动完成中获得所有css属性的方式编写它吗？
浏览 11提问于2020-04-14得票数 2
回答已采纳
我有一个CSSProperties样式的属性。我想以索引器的形式访问自定义属性。一点运气都没有。
style: {
'--primary-color': '#ff0000',
color: '#ff0000',
} as React.CSSProperties
这样做是可行的：
console.log(style['color'])
这并不意味着：
console.log(style['--primary-color'])
这一点也不是：
console.log(style['var(--pri
浏览 2提问于2022-11-17得票数 0
回答已采纳
2回答
我正在尝试将CSS字符串转换为React.CSSProperties对象，但在升级到3.5.3版本时遇到键入错误。
TLDR；如何将字符串映射到接口允许的属性
export function styleStringToCSSProperties(style: string | null) {
const out: React.CSSProperties = {};
if (!style) return null;
const properties = style.split(';');
if (!properties.length) return n
浏览 0提问于2019-08-03得票数 4
我有一个组件，它将borderStyle作为道具接收，然后将其作为道具发送给子div。 我想为这个道具定义一个类型，但是找不到。 以下是我的代码(我只复制了相关部分)： interface OptionalStyleProps {
borderStyle?: any
}
export default class LineTo extends React.Component<OptionalStyleProps> {
public render() {
return (
<div className="react-line
浏览 42提问于2019-03-05得票数 0
回答已采纳
我正在向在我的应用程序中使用TypeScript的方向迈进，我已经到了需要定义这一点的地步：
{ id, label, type, styles, ...props }
在这样的组件中：
const TestComponent = ({ id, label, type, styles, ...props }): React.ReactElement => {};
我应该如何定义...props部件，知道id是number，label是string，type是string，styles是React.CSSProperties
浏览 3提问于2022-08-22得票数 0
回答已采纳
我是TypeScript的新手。我通过create-react-app创建了一个带有TypeScript的项目。而且我在那里用JSS。在某个时候，我发现一些CSS属性会抛出一个错误。
例如，下面是pointerEvents和position。每当我使用它们时，我都会发现一个错误。
(42,28): Argument of type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' is not assignable
浏览 0提问于2018-10-12得票数 3
回答已采纳
我试图在我的类型记录react应用程序中设置我的react选择组件，但没有成功。在遵循docs：时，我得到以下错误：
No overload matches this call.
Overload 1 of 2, '(props: Readonly<ReactSelectProps<string>>): ReactSelectClass<string>', gave the following error.
Type '{ control: () => { width: number; }; }' has n
浏览 3提问于2020-05-19得票数 2
我试图让CSS prop对象成为特定CSS属性的严格子集，但由于某些原因，它似乎不起作用。有人能帮帮我吗？
import { render } from 'react-dom';
import React from 'react';
interface HeadingProps {
style?: React.CSSProperties;
className?: string;
children: React.ReactNode;
css?: Pick<React.CSSProperties, 'margin'>;
浏览 6提问于2021-01-11得票数 0
我正在逐步重写一个应用程序，并将ReScript转换为ReScript。我已经在ReScript中实现了几个组件，但这是第一个组件，我使用ReactDOM.Style.t作为组件的属性。
下面是我最小化的组件代码：
@genType
@react.component
let make = (~sx: option<ReactDOM.Style.t>=?) => {
<div></div>
}
ReScript编译得很好(除了警告没有使用sx，但我们可以忽略它)。
我生成了以下bs.js，这似乎很好：
// Generated by ReScript
浏览 14提问于2021-12-20得票数 4
回答已采纳
什么时候
function StyleMixin(base: React.CSSProperties) {}
StyleMixin({
fontWeight: 'bold',
lineHeight: 1,
textAlign: 'center',
[someVariable]: {
fontSize: '1rem',
}
}
在[someVariable]中，它说
TS2345:类型为{ fontWeight：“粗体”的参数；lineHeight:数字；textAlign：“中间”
浏览 0提问于2018-08-16得票数 0
1回答
在下面的NavLinkProps接口(Reactive路由器v6)中，我认为这是用类型记录编写的，但是当我检查类型记录文档" Interface“时，我看不出让一个Union运算符”AC.26“：”“和 when "React.ReactNode”意味着什么：
children:
| React.ReactNode
| ((props: { isActive: boolean }) => React.ReactNode);
完整界面就在这里。。。
export interface NavLinkProps
extends Omit<LinkP
浏览 3提问于2022-01-09得票数 0
回答已采纳
我用创建了一个NavLink“哑”组件，我正在为他的props创建interface，但是当在interface中插入isActive以传递props时，他抱怨道。
我想知道添加到isActive中的正确的isActive是什么，记住这个组件是“哑”的，将被重用，这样它的父母将把一个function传递到isActive中。
NAVLINK组件接口：
interface ITextLinkProps {
to: string;
exact: boolean;
children: React.ReactChild | React.ReactChild[];
sty
浏览 5提问于2021-04-07得票数 2
回答已采纳
我正在尝试在我的scss文件中使用这些变量，这样我将来就可以直接从这里更改我的主题。但它显示了解析错误，这在以前的项目中是不存在的。 这是一个带有typescript的React CRA项目。 //App.tsx import React from "react";
import "./App.scss";
const lightTheme = {
"--primary": "#27AE60",
"--text-primary": "#000000",
"--ba
浏览 19提问于2021-01-26得票数 0
回答已采纳
首先，当我导入react时，类型记录编译器控制台“无法找到模块react”，然后添加/，并修复问题。
但我刚刚发现，如果我删除参考注释，没有错误。
这是我的密码：
/**
* Created by huagu on 2015/12/21.
*/
import * as ReactDOM from "react-dom";
import * as React from "react";
import FloatButton from "./FloatButton";
window.onload = function (event:Event)
浏览 4提问于2016-01-11得票数 1
回答已采纳
我正在尝试将我的React项目移到Typescript，但没有Typescript经验。我有一个定义如下的组件(向下裁剪)： interface InputProps {
handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
placeholder: string;
style?: React.CSSProperties;
}
const Input: React.ForwardRefRenderFunction<HTMLInputElement, InputProps>
浏览 2796提问于2020-04-26得票数 6
回答已采纳
2回答
我有一些代码，我希望抛出一个不在typescript中的错误，但我不确定为什么。我在react原生项目中有以下代码： const styles = {
flexGrow: 1,
width: '100%',
} as const
return <View style={styles} /> 这一切都很好。但是，如果我向styles添加了无效样式 const styles = {
flexGrow: 1,
width: '100%',
invalidStyle: 'bla'
浏览 18提问于2021-04-07得票数 2
当使用自定义的JSX杂注时，允许扩展DOM元素属性吗？
类似于情感和样式-组件如何使用一个css道具和管理逻辑在他们的jsx语用。我也想这样做，但是可以通过泛型类型配置属性吗？
因此，例如：
// @jsx jsx
import { jsx } from 'my-lib';
...
<button<{ primary: boolean }> css={styles} primary={primary}>
Hello world
</button>
我当前的类型定义如下所示：
interface CustomAttributes {
浏览 5提问于2020-10-03得票数 1
当我试图在fontWeight中设置TypeScript时，我会得到这个错误：
Types of property 'test' are incompatible.
Type '{ fontWeight: number; }' is not assignable to type 'Partial<CSSProperties>'.
Types of property 'fontWeight' are incompatible.
Type 'number' i
浏览 3提问于2017-10-05得票数 9
回答已采纳
我在我的项目中使用typescript已经有一个月了，我一直在努力解决一些疑惑。 有没有一种模式/推荐的方法来组织项目架构中的类型？ 假设我们有一个包含以下接口的上下文： export type ToastMessageType = 'info' | 'success' | 'error';
export interface ToastMessageData {
id: string;
title: string;
description: string;
type: ToastMessageType;
}
export i
浏览 19提问于2020-06-14得票数 13
回答已采纳
我正在教自己如何用TypeScript在Reactinative中构建应用程序。作为一个Swift开发人员，JS和TS需要一点时间来适应。
我注意到的一件事是，在呈现方法的另一个tsx文件中使用我在tsx文件中编写的组件似乎是不可能的。
//SomeComponent.tsx
export default class SomeComponent extends Component {
//all my logic
}
//OtherComponent.tsx
export default class ScoreTable extends Component {
//logi
浏览 0提问于2019-05-14得票数 1
回答已采纳
1回答
我试图在调色板中的背景字段中添加一个"input“属性，然后将主题扩展为说明类型，如下所示：
export const lightTheme = createTheme(commonTheme, {
palette: {
mode: 'light',
background: {
default: '#FFFFFF',
input: '#0000BB',
...
}
declare module '@mui/material/styles' {
interface Th
浏览 13提问于2022-06-27得票数 0
我正在尝试添加这个新发布的样式属性-(它是一个新的css属性-您可以阅读有关它的)
content-visibility: auto;
contain-intrinsic-size: 1000px;
对于一个div包装一些内容，但得到错误的属性是未知的。到目前为止，我已经尝试过：
将它添加到正确类下的scss中，如下所示：
.capWrapper {
width: 100%;
margin-bottom: 108px;
margin-top: 71px;
content-visibility: auto;
contain-intrinsic-size: 100
浏览 4提问于2020-09-25得票数 0
回答已采纳
7回答
我正在尝试将react路由器与TypeScript一起使用。但是，我在使用withRouter函数时遇到了一些问题。在最后一行，我得到了一个非常奇怪的错误：
Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
Type
浏览 2提问于2017-05-23得票数 61
2回答
下面是一个用Javascript实现的简单的React App组件。 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
setting: "def",
limit: 2
}
}
浏览 40提问于2019-12-20得票数 1
回答已采纳
1回答
我有这个React组件：
const Icon = ({ icon, ...props }: { icon: keyof IconType }) => {
const Icon = Icons[icon]
return <Icon {...props} />
}
我试着这样使用它：
<Icon icon={ordinaryString} />
我怎样才能避免得到这个typescript错误：
The type "string" cannot be assigned to the type "keyof IconType".
浏览 3提问于2021-07-15得票数 0
在我的样式组件上获取类型记录错误
类型'{子:字符串；}‘没有与类型’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
回答已采纳
next.js系统规定，当它们的组件具有子功能组件时，您必须将引用传递给该子组件。我发现这非常令人困惑，我很难实现它。 假设这是一个功能组件，可以根据输入的文本显示一个很棒的字体图标。 const FaIcon:FC<propsObj> = ({icon}):ReactElement => {
return (
<>
{ (icon==="Tag") && <FaTag /> }
{ (icon==="QuestionCircle") && <
浏览 27提问于2021-08-11得票数 0
回答已采纳
我只是在<TextInput/>组件中尝试简单的<TextInput/>。它的工作方式与预期一样，但类型记录不断抱怨该属性不存在。
代码直接来自官方文档。
import React, { Component } from 'react';
import { TextInput } from 'react-native';
export default function UselessTextInput() {
const [value, onChangeText] = React.useState('Useless Plac
浏览 2提问于2020-05-23得票数 2
回答已采纳
对于TS来说是新手，所以要在项目上实现它。不知道这叫做什么，所以不能正确地搜索它。如果有人有它的术语，那么我将更改标题。
我要做的是将size支柱传递到组件中，并使用它来创建正确的HTML。例如，size="h3"将创建一个<h3>元素。
import React from "react";
import styles from "./Header.module.css";
interface Props {
children: React.ReactNode;
containerStyle?: React.CSSProp
浏览 13提问于2022-07-21得票数 1
回答已采纳
1回答
我目前正在构建一个选项卡组件，并为CSS样式构建内联变量。这是一个流光应用程序，允许我对python端进行调整。目前，我有大约四个元素具有CSS样式，所以我有四个不同的样式变量，如下所示：
const navStyle: React.CSSProperties = this.props.args['navStyle'] || {}
const tabStyle: React.CSSProperties = this.props.args['tabStyle'] || {}
const tabOptionsStyle = this.props.args['
浏览 3提问于2022-04-18得票数 1
回答已采纳
我刚开始反应，现在开始了一个学习项目，在这个项目中，我使用了打字稿3.7.2和材料-ui 4.11.0和反作用16.13.1。我创建了我所有的页面布局作为功能组件，但在尝试将它们转换为类组件(我发现比使用钩子容易)时，我得到了以下错误(作为注释附在一起)，我在堆栈溢出上查看了其他一些答案，尝试了不同的方法，但似乎没有一种方法有效，我读过的大多数答案都是2-3年前的，而且我猜到了从那以后的一些变化正在破坏更改，有人知道如何解决这些问题吗？
import React from "react";
import Avatar from "@material-ui/core/Av
浏览 3提问于2020-07-31得票数 0
回答已采纳
我在一个项目中使用React和TypeScript，我使用的是内联CSS。我希望将其设置为在div上盘旋以执行更改其背景色的函数。我不想在CSS中使用：：悬停和类。
<div
onClick={() => setDropDownOpen(prev => !prev)}
style={buttonstyle}
onMouseOver={lightenBackground}
>
const buttonstyle: React.CSSProperties = {
display: 'flex',
alignI
浏览 7提问于2022-08-03得票数 0
在Javascript文件中获得自动建议(带有类型)应该配置什么？
换句话说，给定一个用JS编写的组件，如何获得它的道具的自动提示(这是可能的，请阅读所有问题)。
我试图获得一个简单按钮组件的自动提示(以获得“红色”或“蓝色”的建议)，。
// Would like the IDE so suggest "red" or "blue" on changing color prop
const App = () => {
return <Button color="red" />;
};
// Button.js
im
浏览 3提问于2020-06-04得票数 1
回答已采纳
我刚接触过材料用户界面。我们使用withStyles包装组件。
我按照docs 创建了具有正确类型的类对象。
const classes = createStyles({
mainDiv: {
display: "flex",
flexDirection: "column",
justifyContent: "center"
...
然后，我将这些信息传递给className属性中的组件，如下所示。
render() {
const { classes } =
浏览 3提问于2021-02-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
