可以在 styled-components .attrs 方法中使用“font-variation-settings”吗？答案

【问题标题】：Can "font-variation-settings" be used in the styled-components .attrs method?可以在 styled-components .attrs 方法中使用“font-variation-settings”吗？
【发布时间】：2020-11-26 18:26:30
【问题描述】：

我正在尝试使用样式化组件将变量“宽度”传递给组件。 “宽度”的值是鼠标位置的函数。将其直接传递到文字字符串会导致 styled-components 为每次鼠标移动创建一个新类，这会引发警告。

为了解决这个问题，我尝试使用 .attrs 方法将可变样式对象传递给组件，但我不知道如何将此 css 属性传递给组件。

我试过了：

const  StyledComponent = styled.div.attrs((props) => (
  {
    style: {
      fontVariationSettings: `wdth: ${props.width})`,
    },
  })
)``;

但是 React 不认为这是传递给 CSS 的有效属性。有什么办法吗？

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

知道了。典型的是，在花费数小时尝试不同的东西后发布问题后总是直截了当。我可以使用各个属性，而不是使用 font-variation-settings。宽度变为字体拉伸。

所以我要找的是

const  StyledComponent = styled.div.attrs((props) => (
  {
    style: {
      fontStretch: `wdth: ${props.width})`,
    },
  })
)``;

【讨论】：