有什么方法可以避免在样式组件 mixin 中传递所有参数？

问题描述

我使用样式化组件，并有一个包含许多与此类似的默认参数的 mixin

`export const myMixins = {
   font: (
       fontFamily = 'Arial',weight = 600,size = '10px',style = 'normal') => `
       font-family: ${ fontFamily };
       font-size: ${ size };
       font-style: ${ style };
       font-weight: ${ weight };
   `
};` 

我使用默认参数来避免在不需要时传递所有参数。但是当我尝试运行它时，它只有在我通过所有这些时才有效，如下所示： ${ myMixins.font('Roboto','bold','9px','normal') }; 我也尝试将 null 分配给 params，但没有任何改变。当我尝试运行它时，我的 IDE 仍然显示所有参数的占位符，否则它将无法工作。我也尝试使用诸如 $size 之类的关键字，但无法找出正确的语法，也没有在网络上的任何地方找到它。我希望能够只传递我想要更改的特定参数。非常感谢任何帮助。

解决方法

我相信这样的事情可以解决您的问题：

export const myMixins = {
  font: (
    fontFamily?: string,weight?: number,size?: string,style?: string
  ) => `
       font-family: ${fontFamily || 'Arial'};
       font-size: ${size || 600};
       font-style: ${style || '10px'};
       font-weight: ${weight || 'normal'};
   `,}