Question

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

mixin在main / root元素上运行良好，但在嵌套元素上效果不佳。

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对象。

TypeStyle如何将Mixins传递给嵌套元素

1 个答案: