如何更改或覆盖 React js 中的公共组件

Question

我有一个通用组件，我想更改它的颜色属性以在其他地方使用它。

const ViewAllIcon = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="0 0 26 27"
    {...props}
  >
    <path
      fill="var(--primary)"
      d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
    />
    <path
      fill="#FFF"
      d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
    />
  </svg>
);

export default ViewAllIcon;

这是具有主要蓝色和白色的常见组件。

<ViewAllIcon className="ml8" fill="white" />

我正在使用它将填充颜色更改为白色和绿色。

Answer 1

将填充值更改为“currentColor”，然后将颜色变量传递给组件。

ViewAllIcon({ color: 'var(--primary)' })

or

<ViewAllIcon color={'var(--primary)'} />


const ViewAllIcon = (props) => (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="18"
        height="18"
        viewBox="0 0 26 27"
        {...props}
      >
        <path
          fill="currentColor"
          d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
        />
        <path
          fill="currentColor"
          d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
        />
      </svg>
    );
    
    export default ViewAllIcon;

Answer 2

你可以直接把道具放在填充属性上

类似这样的：

const ViewAllIcon = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="0 0 26 27"
    {...props}
  >
    <path
      fill={props.fill} // <--- UPDATE HERE!
      d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
    />
    <path
      fill="#FFF"
      d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
    />
  </svg>
);

export default ViewAllIcon;

工作示例：