Webpack+TypeScript+React Hooks项目CSS-in-JS报style类型错误

TypeScript对对象字面量的默认类型推断会将所有字符串属性识别为宽泛的string类型，而React的CSSProperties接口要求display、flexDirection、alignItems这类样式属性必须匹配固定的字面量枚举值（比如flexDirection仅支持row/column/row-reverse等合法值，不兼容任意string类型），因此触发类型不匹配报错。

直接在定义样式对象的位置绑定React.CSSProperties类型即可，无需在JSX的style属性上额外做处理，常用实现方式有三种：

• 方式1：对单个样式对象做类型断言
  在对应样式属性的对象字面量末尾添加类型标记，是最简便的写法：

  import React from 'react';
  
  const Menu = () => (
      <div maxWidth="lg" style={styles.menuContainer}>
          MENU COMPONENT
      </div>
  )
  
  export default Menu;
  
  const styles = {
      menuContainer: {
          display: 'flex',
          margin: 0,
          padding: 0,
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-around',
          width: '100%',
          height: '5vh',
          background: 'rgba(212, 15, 24,0.8)',
      } as React.CSSProperties // 在此处绑定类型
  };
  

  这种写法会触发TS对样式属性的全量校验，确保所有属性名、属性值都符合CSS规范。

• 方式2：对整个样式对象统一标注类型
  适合存在多个独立样式块的场景，避免重复写类型断言：

  const styles: Record<string, React.CSSProperties> = {
      menuContainer: {
          // 样式内容与原有定义一致
      }
  };
  

• 方式3：通过as const做字面量类型收窄
  不需要重复引入React类型即可完成类型匹配：

  const styles = {
      menuContainer: {
          display: 'flex',
          margin: 0,
          padding: 0,
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-around',
          width: '100%',
          height: '5vh',
          background: 'rgba(212, 15, 24,0.8)',
      } as const
  };
  

  注意该写法会将样式对象标记为只读，适合纯静态样式的定义场景。

• 当前tsconfig.json配置无需调整，noImplicitAny开启的严格校验是正常类型检查，不需要关闭规则来规避报错
• 不要在JSX的style属性赋值时做类型断言（例如写style={styles.menuContainer as React.CSSProperties}），这种写法会丢失定义样式时的类型校验，一旦拼写错误样式属性名，TS不会给出提示
• 建议将当前.js后缀的Menu组件改为.tsx后缀，配合allowJs的配置可以获得更完整的类型提示

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