我怎么能把两个道具从jsx传递到scss

Question

我需要在MyComponent.scss

中使用线性渐变来跟踪两个道具

startColor: PropTypes.string
endColor: PropTypes.string

我的组件如下所示

MyComponent.jsx

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

目前它只接受一种颜色。

<{1}}中的

线性渐变属性如下所示

MyComponent.scss

它将更新为使用startColor和endColor。

我怎么能实现这个目标？

Answer 1

您可以使用内联CSS或在JS文件中使用CSS对象来执行此操作。但不是直接在一个特别解释为CSS的文件中。

技术上，你可以使用服务器端渲染来实现这一点，要求express覆盖文件系统中的文件并返回样式。但那是疯了，愚蠢和疯狂。

Answer 2

您不能将道具传递给SCSS，但styled-components支持。请参阅其文档中的Adapting based on props。

没有样式组件，唯一的另一个选择是通过将style道具传递给元素来使用内联样式。