如何在Stencil自定义组件中从TSX传递变量值到SCSS文件以实现动态颜色

嘿，我来帮你搞定这个动态颜色的需求！在Stencil里把TSX里的变量值传到SCSS里其实挺简单的，最常用也最靠谱的方法就是借助CSS自定义属性（也就是常说的CSS变量），下面我一步步给你演示具体怎么做：

第一步：在TSX组件里定义属性并绑定CSS变量 #

首先，你需要在组件类里用@Prop()装饰器定义一个接收颜色值的属性，然后在渲染的时候把这个属性值绑定成组件根元素的CSS变量。

举个完整的TSX代码例子：

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  // 定义颜色属性，给个默认值防止没传的情况
  @Prop() color: string = '#333';

  render() {
    // 把color值绑定为CSS变量，挂载到组件的根容器上
    return (
      <div style={{ '--dynamic-text-color': this.color }} class="component-wrap">
        <p>这是用动态颜色渲染的文本</p>
        <button class="action-btn">点击我</button>
      </div>
    );
  }
}

第二步：在SCSS里直接使用这个CSS变量 #

接下来你就可以在SCSS文件里通过var()函数来引用刚才定义的CSS变量了，甚至还能给变量设置 fallback 值（也就是变量没生效时的默认样式）。

对应的SCSS代码：

.component-wrap {
  // 直接用TSX传过来的动态颜色
  color: var(--dynamic-text-color);
  padding: 16px;
}

.action-btn {
  // 给按钮也用这个动态颜色，同时加个fallback
  border-color: var(--dynamic-text-color, #666);
  background-color: transparent;
  color: var(--dynamic-text-color);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    // hover状态也能复用这个变量
    background-color: var(--dynamic-text-color);
    color: white;
  }
}

进阶：处理颜色衍生值（比如透明度） #

如果需要基于动态颜色做一些衍生样式，比如半透明背景，你可以把颜色转成RGB格式再传递，这样就能用rgba()来调整透明度了。

修改一下TSX里的代码，加个颜色转换的辅助函数：

// 辅助函数：把十六进制颜色转成RGB字符串
private hexToRgb(hex: string): string {
  // 处理简写的十六进制，比如#fff转成#ffffff
  const fullHex = hex.length === 4 
    ? hex.replace(/./g, c => c + c) 
    : hex;
  const r = parseInt(fullHex.slice(1, 3), 16);
  const g = parseInt(fullHex.slice(3, 5), 16);
  const b = parseInt(fullHex.slice(5, 7), 16);
  return `${r}, ${g}, ${b}`;
}

render() {
  return (
    <div 
      style={{ 
        '--dynamic-text-color': this.color,
        '--dynamic-color-rgb': this.hexToRgb(this.color)
      }} 
      class="component-wrap"
    >
      <p>这是用动态颜色渲染的文本</p>
      <div class="translucent-box">半透明背景</div>
    </div>
  );
}

然后在SCSS里这样用：

.translucent-box {
  // 用RGB值配合透明度，实现半透明效果
  background-color: rgba(var(--dynamic-color-rgb), 0.2);
  padding: 8px;
  margin-top: 12px;
}

这种方法的好处是完全基于原生CSS特性，性能好，而且当你修改color属性的时候，样式会自动更新，非常适合动态样式的场景。

备注：内容来源于stack exchange，提问作者Stefani Toto