reactjs - 我如何将两个 Prop 从 jsx 传递到 scss

Question

我有以下两个 Prop ，我需要在 MyComponent.scss

中以线性梯度访问

startColor: PropTypes.string
endColor: PropTypes.string

我的组件如下所示

MyComponent.jsx

<myComponent 
  {...customProps}
  style={{color: customProps.color }}
  className={classess}
  ...other props here..
  />

目前它只接受一种颜色。

MyComponent.scss 中的线性渐变属性如下所示

linear-gradient(to left, currentcolor, currentcolor);

它将更新为使用 startColor 和 endColor。

我怎样才能做到这一点？

Answer 1

你不能将 props 传递给 SCSS，但是 styled-components支持那个。参见 Adapting based on props来自其文档。

如果没有 styled-components，唯一的其他选择是通过将 style 属性传递给元素来使用内联样式。