TypeStyle 如何将混合元素传递给嵌套元素

Question

我想在TypeStyle的嵌套元素中包含一个mixin。

mixin 在主/根元素上工作得很好，但在嵌套元素上则不然。

export const fontSize = (value: number) => {
    const valueStr = value + 'px';
    return {
        fontSize: valueStr
    }
};
export const warning = style(
    fontSize(15), {
        $nest: {
            '& span': ( fontSize(12), {
              backgroundColor: 'yellow'
            })
        }
    });

<div className={warning}>
    This text is formatted correctly
    <span>this text is not</span>
</div>

我不确定是否可以将 mixins 传递给嵌套元素。我可以给span元素一个额外的类，但那会是更多的代码。

Answer 1

如果元素是嵌套的，你显然想去嵌套选择器>，例如，&选择器可用于:hover：

// fontSize function given by author
const fontSize = (value: number) => {
    const valueStr = value + 'px';
    return {
        fontSize: valueStr
    }
};
// cleaner definition of fontSize function
const fontSizeFunc = (value: number) => ({ fontSize: `${value} px` });
// correct styling object using fontSize function
export const warning = {
  ...fontSize(15),
  $nest: {
    ">": {
      span: {
        backgroundColor: "yellow",
        ...fontSize(12),
      },
    },
  },
});
// correct styling object not using fontSize function
export const warning = {
  fontSize: 15,
  $nest: {
    ">": {
      span: {
        backgroundColor: "yellow",
        fontSize: 12,
      },
    },
  },
});

编辑：添加了返回对象的fontSize函数的使用，因此要求spread运算符生成正确的JS对象。