reactjs - 从 ts 组件传递要在 SASS 中使用的属性

Question

我正在尝试将一些属性（高度和宽度）传递给 Icon 组件（只能采用 3 个属性 className path 和 viewBox），因此我不能使用内联样式来添加宽度和高度。有没有办法传递要在 Sass 中使用的高度和宽度属性？这是组件：

import React, { memo } from 'react';
import { Icon } from '@kame/ui';
import classNames from 'classnames';
import styles from './creation-button.module.scss';

type Props = {
  icon: {
    path: string;
    viewBox: string;
    height: 20px
    width: 20px
  };
  title: string;
  onClick: () => void;
  key: string;
};

function CreationButton(props: Props): JSX.Element {
  return (
    <button onClick={props.onClick} type="button" className={styles['button']}>
      <div className={styles['button__icon-container']}>
        <Icon
          className={styles['button__icon']}
          path={props.icon.path}
          viewBox={props.icon.viewBox}
        />
      </div>
      <span className={styles['button__title']}>{props.title}</span>
    </button>
  );
}

export default memo(CreationButton);

标签： reactjstypescriptsass