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>

我不确定是否可以将 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 对象。