在tsx文件中定义一个变量，在scss文件中使用，该怎么处理？

CSS 自定义属性

tsx文件定义属性

import React from 'react';
import './Component.scss';

const MyComponent: React.FC = () => {
  const primaryColor = '#3498db';
  const fontSize = '16px';
  
  return (
    <div 
      className="my-component"
      style={{
        '--primary-color': primaryColor,
        '--font-size': fontSize,
      } as React.CSSProperties}
    >
      <h1>Hello World</h1>
      <p>This is a paragraph</p>
    </div>
  );
};

export default MyComponent;

scss文件中使用

.my-component {
  h1 {
    color: var(--primary-color);
    font-size: calc(var(--font-size) * 1.5);
  }
  
  p {
    color: var(--primary-color);
    font-size: var(--font-size);
  }
}