You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React styled-components中CreateGlobalStyle编译错误求助

React项目中使用CreateGlobalStyle配置全局样式时遭遇TS2740错误

已安装最新版styled-components和@types/styled-components,但仍出现以下TypeScript错误:

TS2740: 类型“{}”缺少类型“TemplateStringsArray”中的以下属性: raw, length, concat, join 以及另外20个属性。
const App = (): JSX.Element => (

return (<GlobalResets />)

^^^^^^^^^^^^
return (<GlobalColors />)

)

相关文件代码如下:

GlobalResets 文件代码

import {createGlobalStyle} from 'styled-components';
import { Color } from './colors';

const GlobalResets = createGlobalStyle`
  * {
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border: none;
    border-radius: 0;

    background: none;
    box-shadow: none;
  }

  body {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    background-color: ${Color.BLACK};
  }

  button,
  input,
  select {
    font: inherit;
  }

  a {
    text-decoration: none;
  }

  ol,
  ul {
    list-style: none;
  }  
`;

export { GlobalResets }

GlobalColors 文件代码

import {createGlobalStyle} from 'styled-components';
enum Color {
    BLACK = `var(--color-black)`,
    LIGHT_BROWN = `var(--color-light-brown)`,
    BROWN = `var(--color-brown)`,
    BLUE = `var(--color-blue)`,
    LIGHT_GREEN = `var(--color-light-green)`,
    GREEN = `var(--color-green)`,
    BEIGE = `var(--color-beige)`,
    WHITE = `var(--color-white)`,
    GRAY = `var(--color-gray)`,
    RED = `var(--color-red)`,
}

const GlobalColors = createGlobalStyle`
  :root {
    --color-black: #000000;
    --color-light-brown: #DEAD8D;
    --color-brown: #C08332;
    --color-blue: #3F51B5;
    --color-light-green: #8BC34A;
    --color-green: #2E7D32;
    --color-beige: #FFCC80;
    --color-white: #F5F5F5;
    --color-gray: #D7CCC8;
    --color-red: #D32F2F;
  }
`;

export {Color, GlobalColors}

App 文件代码

import {GlobalResets} from "../../tokens/resets";
import {GlobalColors} from "../../tokens/colors";

const App = (): JSX.Element => (
    <>
        <GlobalResets />
        <GlobalColors />
    </>
)

export default App

内容的提问来源于stack exchange,提问作者user22131978

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 19:22:49