Reactjs 如何在React-typescript中使用镭（错误：与type'；CSSProperties'；.TS2559没有共同的属性）？

我试着在React中使用Typescript。现在需要一些使用镭的样式

我知道这是关于jsx类型的风格不允许使用媒体， 但我不知道如何修复它。 有人能帮忙吗？ 非常感谢

运行服务器时出现一些错误

Failed to compile
/.../my_react/ts-react/src/Person/Person.tsx
Type error: Type '{ '@media (min-width: 500px)': { width: string; }; }' has no properties in common with type 'CSSProperties'.  TS2559

    17 |     };
    18 |     return (
  > 19 |         <div className="Person" style={style}>
       |                                 ^
    20 |             <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
    21 |             <p>{props.children}</p>
    22 |             <input type="text" onChange={props.change} value={props.name}/>
This error occurred during the build time and cannot be dismissed.

//目标ts文件

const person = (props: any) => {
    const style = {
        '@media (min-width: 500px)': {
            width: '450px'
        }
    };
    return (
        <div className="Person" style={style}>
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.change} value={props.name}/>
        </div>
    );
};


export default Radium(person);

constperson=（道具：任意）=>{
常量样式={
“@介质（最小宽度：500px）”：{
宽度：“450px”
}
};
返回(
我是{props.name}，我是{props.age}岁
{props.children}

);
};
出口默认镭（人）；

//根ts文件

import React, { Component, useState } from 'react';
import Radium from 'radium';

import './App.css';
import Person from './Person/Person';


class App extends Component {
  state = {
    persons: [
      { id: 0, name: 'John', age: 30},
      { id: 1, name: 'Jack', age: 20},
      { id: 2, name: 'Joe', age: 40},
    ],
    show: false
  }

  deletePersonHandler = (index: number) => {
    const persons = [...this.state.persons];
    persons.splice(index, 1);
    this.setState({
      ...this.state,
      persons: persons
    });
  }

  nameChangedHandler = (event: React.ChangeEvent<HTMLInputElement>, id: number) => {
    const personIndex = this.state.persons.findIndex(p => {
      return p.id === id;
    });

    const person = {
      ...this.state.persons[personIndex]
    };
    person.name = event.target.value;
    const persons = [...this.state.persons];
    persons[personIndex] = person;

    this.setState({
      ...this.state,
      persons: persons
    });
  }

  togglePersonsHandler = () => {
    const doesShow = this.state.show;
    this.setState({
      ...this.state,
      show: !doesShow
    });
  }

  render() {
    const style = {
      backgroundColor: 'green',
      color: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer',
      ':hover': {
        backgroundColor: 'lightgreen',
        color: 'black'
      }
    };

    let contents = null;
    if (this.state.show) {
      contents = (
        <Radium.StyleRoot>
          <div>
            {this.state.persons.map((person, index) => {
              return <Person
                click={this.deletePersonHandler.bind(this, index)}
                change={(event: React.ChangeEvent<HTMLInputElement>) => this.nameChangedHandler(event, person.id)}
                name={person.name}
                age={person.age}
                key={person.id} />
            })}
          </div>
        </Radium.StyleRoot>
      );
      style.backgroundColor = 'red';
      style[':hover'] = {
        backgroundColor: 'salmon',
        color: 'black'
      }
    }

    const classes = [];

    if (this.state.persons.length <= 2) {
      classes.push('red');
    }
    if (this.state.persons.length <= 1) {
      classes.push('bold');
    }


    return (
      <div className="App">
        <h1>Hi</h1>
        <p className={classes.join(' ')}>This is working!</p>
        <button 
          style={style}
          onClick={this.togglePersonsHandler}>Switch Name</button>
        {contents}
      </div>
    );
  }
}

export default Radium(App);

import React，{Component，useState}来自'React'；
从“镭”进口镭；
导入“/App.css”；
从“./人/人”导入人；
类应用程序扩展组件{
状态={
人员：[
{id:0，姓名：'John'，年龄：30}，
{id:1，姓名：'Jack'，年龄：20}，
{id:2，姓名：'Joe'，年龄：40}，
],
节目：假
}
deletePersonHandler=（索引：number）=>{
const persons=[…this.state.persons]；
人.拼接（索引1）；
这是我的国家({
…这个州，
人:人
});
}
nameChangedHandler=（事件：React.ChangeEvent，id:number）=>{
const personIndex=this.state.persons.findIndex（p=>{
返回p.id==id；
});
const person={
…此.状态.个人[个人索引]
};
person.name=event.target.value；
const persons=[…this.state.persons]；
人员[人员索引]=人员；
这是我的国家({
…这个州，
人:人
});
}
TogglePersonHandler=（）=>{
const doesShow=this.state.show；
这是我的国家({
…这个州，
表演：！表演
});
}
render（）{
常量样式={
背景颜色：“绿色”，
颜色：'白色'，
字体：“继承”，
边框：“1px纯蓝色”，
填充：“8px”，
光标：“指针”，
“：悬停”：{
背景颜色：“浅绿色”，
颜色：“黑色”
}
};
让contents=null；
if（this.state.show）{
内容=(
{this.state.persons.map（（person，index）=>{
返回此.nameChangedHandler（事件，person.id）}
name={person.name}
年龄={person.age}
key={person.id}/>
})}
);
style.backgroundColor='红色'；
样式['：悬停']={
背景颜色：“鲑鱼”，
颜色：“黑色”
}
}
常量类=[]；
如果（this.state.persons.length在person函数组件中，您可以将样式类型声明为Radium.StyleRules，如下所示

const style:Radium.StyleRules = {
  "@media (min-width: 500px)": {
    width:"450px",
  },
};

const style:Radium.StyleRules = {
  "@media (min-width: 500px)": {
    width:"450px",
  },
};