TypeStyle中如何为嵌套元素传入Mixin？嵌套元素Mixin不生效问题

嘿，我一眼就看出问题所在啦！你在嵌套的& span样式里用了逗号表达式，这会导致只有最后一个对象{ backgroundColor: 'yellow' }被实际应用，前面的fontSize(12)虽然执行了，但它的返回值被直接丢弃了，所以span的字体大小样式根本没生效。

修正方案有两种，都能让Mixin在嵌套元素里正常工作： #

方案1：使用扩展运算符合并样式对象

把Mixin返回的样式对象和自定义样式合并成一个对象，这样所有样式都会被包含进去：

export const fontSize = (value: number) => { 
  const valueStr = value + 'px'; 
  return { fontSize: valueStr } 
};

export const warning = style(
  fontSize(15),
  { 
    $nest: { 
      '& span': {
        ...fontSize(12), // 用扩展运算符把mixin的样式合并进来
        backgroundColor: 'yellow'
      } 
    } 
  });

方案2：用数组传递多个样式（和根元素用法一致）

TypeStyle的样式定义（包括嵌套内的）同样支持接收数组形式的样式参数，就像你在根元素使用fontSize(15)那样：

export const fontSize = (value: number) => { 
  const valueStr = value + 'px'; 
  return { fontSize: valueStr } 
};

export const warning = style(
  fontSize(15),
  { 
    $nest: { 
      '& span': [
        fontSize(12), // 直接把mixin放进数组里
        { backgroundColor: 'yellow' }
      ] 
    } 
  });

这样修改后，你的span元素就能同时应用fontSize(12)和黄色背景样式啦，不用额外给span加类，完美保持代码简洁性。

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