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
相关产品推荐
相关产品推荐

