javascript - TypeStyle 如何将 mixins 传递给嵌套元素

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>

我不确定是否可以将 mixin 传递给嵌套元素。我可以为 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对象。