TypeScript结合Emotion.css与React时样式数组变量报错问题

这是个很常见的TypeScript类型推断导致的问题，我来帮你理清原因和解决办法：

问题根源 #

当你直接在styled('div')的数组参数里写对象字面量时，TypeScript会借助@emotion/styled-base的类型定义，自动把这些对象推断为Emotion要求的CSSObject类型——也就是符合CSS样式规则的特定对象类型。

但当你把样式对象单独赋值给变量b时，TypeScript的默认类型推断会把它当成一个宽泛的{ [key: string]: string }普通对象，而不是Emotion认可的样式类型。这种宽泛的类型和styled函数期望的参数类型不兼容，就出现了看似奇怪的“不能赋值给string类型”的错误（其实是类型不匹配的误报）。

3种解决办法 #

1. 显式指定CSSObject类型 #

直接给变量加上Emotion提供的样式类型约束，让TypeScript明确知道这是一个样式对象：

import styled from '@emotion/styled-base';
// 导入Emotion的样式类型
import { CSSObject } from '@emotion/core';

// 显式指定变量类型为CSSObject
const b: CSSObject = { 
  fontStyle: 'normal', 
  fontWeight: 'normal', 
  fontSize: '14px', 
  lineHeight: '23px' 
};

const Layout = styled('div')([
  { height: 48, color: 'white', background: Brand01, width: 142, padding: '12px 16px', textAlign: 'center' },
  b
]);

2. 用as const让类型推断更精确 #

通过as const告诉TypeScript把对象的每个属性值推断成字面量类型（比如'normal'而不是宽泛的string），这样就能匹配Emotion的样式类型要求：

import styled from '@emotion/styled-base';

// 使用as const约束类型推断精度
const b = { 
  fontStyle: 'normal', 
  fontWeight: 'normal', 
  fontSize: '14px', 
  lineHeight: '23px' 
} as const;

const Layout = styled('div')([
  { height: 48, color: 'white', background: Brand01, width: 142, padding: '12px 16px', textAlign: 'center' },
  b
]);

3. 把变量定义在styled函数的上下文里（可选） #

如果你不需要复用这个变量，可以把它直接定义在数组参数里，不过这其实就是你一开始的可行写法，适合不需要单独抽离样式的场景。

验证效果 #

上面两种方法都能让TypeScript正确识别变量b的样式类型，消除类型错误，同时保留代码的可复用性。

内容的提问来源于stack exchange，提问作者Kealman