TypeScript下makeStyles用theme设fontWeight Docker构建报not assignable错误

• 依赖版本不对齐：该问题的核心是本地与Docker容器内的前端依赖次版本号不一致。通常是因为Docker构建时仅复制了package.json就执行npm install，没有同步本地的package-lock.json或yarn.lock锁文件，导致容器内安装的@types/react、@material-ui/core类型定义包版本高于本地版本。更高版本的类型定义对fontWeight属性的类型校验更严格，而MUI v4默认Theme类型中typography.fontWeightBold的number类型没有和React的CSSProperties.fontWeight类型做自动对齐，因此触发not assignable错误。
• 本地缓存掩盖问题：本地开发环境的node_modules存在缓存的旧版本类型定义，因此不会触发校验报错，Docker环境为全新安装依赖，因此暴露了类型不兼容问题。

方案1：对齐依赖版本（优先解决环境差异） #

修改Dockerfile，先复制锁文件再执行依赖安装，确保容器内依赖与本地完全一致：

# 示例Dockerfile对应片段
WORKDIR /app
COPY package*.json ./
# 用npm ci严格按照lock文件安装，避免版本漂移
RUN npm ci
COPY . .
RUN npm run build

该操作可以直接消除本地与Docker的环境差异，如果本地确实没有报错，执行该操作后Docker构建也不会触发类型错误。

方案2：类型兼容改造（永久解决类型校验问题） #

如果需要保持依赖版本更新，或者自定义了MUI主题，可以通过类型断言明确告知TS该值符合fontWeight类型要求：

export const useTableStyles = makeStyles(theme =>
    createStyles({
        spannedTableCell: {
            fontWeight: theme.typography.fontWeightBold as React.CSSProperties['fontWeight']
        }
    })
);

如果你对自定义的theme做了全局类型声明，也可以直接在Theme类型定义中对齐typography的fontWeight属性类型，避免后续所有使用处都需要加断言。

方案3：使用MUI内置的typography变体（最符合MUI设计规范） #

如果不需要单独覆盖fontWeight，优先使用MUI内置的typography变体属性，自动继承theme配置：

spannedTableCell: {
    ...theme.typography.h6 // 或其他对应粗细的变体，自动带fontWeight配置
}

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