按钮上的图标应在将鼠标悬停在其上方时改变颜色：无法在新图标上使用现有代码

问题描述 投票：0回答：1

我正在开发一个项目，该项目具有第三方制作的一些功能。

目前它的工作原理是这样的：

有一个按钮同时包含文本和图标图像（svg）。 最初按钮是白色的，带有图标的文本是蓝色的。 当我将鼠标悬停在其上时，按钮的颜色变为蓝色。为了避免按钮和项目上的项目具有相同的颜色（并且变得不可见），在我之前工作的人也做了一些将文本和图标颜色更改为白色的操作。

以下图片：

现在，我被要求在同一按钮上使用新图像作为图标。 我为此使用了一个现成的 svg 格式文件。

但是现在，有一个问题。 当我将鼠标悬停在带有新图标的按钮上时，只有文本将其颜色更改为白色，图标保持蓝色并消失在背景上。

我正在尝试进行一项研究，找出造成这种情况的原因。

旧图标/文件被称为“Eye”，新图标/文件被称为“Views”。

旧图标 SVG（抱歉，我不知道哪部分相关，哪部分不相关，所以这里有一个完整的 svg）：

import { FC } from "react";

interface IEye {
  color: string;
}

export const Eye: FC<IEye> = ({ color }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      className={color}
    >
      <defs>
        <clipPath id="clipPath">
          <rect
            id="Rectangle_136"
            data-name="Rectangle 136"
            width="14"
            height="14"
          />
        </clipPath>
      </defs>
      <g id="eye" clipPath="url(#clipPath)">
        <path
          id="Path_450"
          data-name="Path 450"
          d="M13.575,5.052A7.725,7.725,0,0,0,7,1.106,7.725,7.725,0,0,0,.426,5.052a2.863,2.863,0,0,0,0,3.011A7.725,7.725,0,0,0,7,12.009a7.725,7.725,0,0,0,6.575-3.946,2.863,2.863,0,0,0,0-3.011Zm-.995,2.4A6.6,6.6,0,0,1,7,10.842a6.6,6.6,0,0,1-5.58-3.39,1.7,1.7,0,0,1,0-1.79A6.6,6.6,0,0,1,7,2.273a6.6,6.6,0,0,1,5.58,3.39,1.7,1.7,0,0,1,0,1.79Z"
          transform="translate(-0.001 0.442)"
        />
        <path
          id="Path_451"
          data-name="Path 451"
          d="M5.833,2.917a2.92,2.92,0,1,0,2.061.855,2.917,2.917,0,0,0-2.061-.855Zm0,4.667a1.75,1.75,0,1,1,1.237-.513A1.75,1.75,0,0,1,5.833,7.583Z"
          transform="translate(1.167 1.167)"
        />
      </g>
    </svg>
  );
};

新图标 SVG：

import { FC } from "react";

interface IViews {
  color: string;
}

export const Views: FC<IViews> = ({ color }) => {
  return (
            <svg width="22" height="22" viewBox="0 0 22 22" className={color} xmlns="http://www.w3.org/2000/svg">
            <g id="views">
            <path d="M7.74999 21.15C7.29388 21.1463 6.84632 21.0258 6.44999 20.8L4.81999 19.85C4.5234 19.6803 4.26362 19.4532 4.05585 19.1819C3.84809 18.9106 3.69651 18.6006 3.60999 18.27C3.5185 17.9361 3.49437 17.5872 3.53901 17.2439C3.58365 16.9005 3.69616 16.5695 3.86999 16.27L4.30999 15.52C4.09417 15.2002 3.90038 14.8661 3.72999 14.52H2.82999C2.48856 14.5187 2.15072 14.4501 1.83578 14.3183C1.52083 14.1864 1.23494 13.9938 0.99444 13.7514C0.753936 13.5091 0.563524 13.2217 0.434075 12.9057C0.304627 12.5898 0.238679 12.2514 0.239994 11.91V10C0.242891 9.66634 0.311502 9.33652 0.441905 9.02939C0.572309 8.72225 0.76195 8.44382 0.999994 8.21C1.24005 7.96988 1.52547 7.7799 1.83964 7.65114C2.15382 7.52238 2.49047 7.45741 2.82999 7.46H3.70999C3.88164 7.11252 4.07885 6.77827 4.29999 6.46L3.85999 5.67C3.69038 5.37259 3.58165 5.04439 3.54016 4.70454C3.49866 4.36468 3.52523 4.01997 3.6183 3.69048C3.71138 3.361 3.8691 3.05333 4.08228 2.78542C4.29546 2.51751 4.55984 2.29471 4.85999 2.13L6.49999 1.19C6.79806 1.02307 7.1261 0.916522 7.46536 0.876439C7.80463 0.836357 8.14847 0.863526 8.47723 0.956396C8.80599 1.04927 9.11322 1.20601 9.38137 1.41768C9.64952 1.62935 9.87332 1.89179 10.04 2.19L10.47 2.94C10.823 2.92 11.1769 2.92 11.53 2.94L12 2.15C12.171 1.85444 12.3985 1.59546 12.6696 1.38785C12.9407 1.18023 13.2501 1.02805 13.58 0.939999C13.9136 0.845655 14.2629 0.820052 14.6067 0.864746C14.9505 0.909439 15.2816 1.0235 15.58 1.2L17.21 2.14C17.8064 2.48505 18.2415 3.05276 18.4196 3.7184C18.5978 4.38404 18.5044 5.09317 18.16 5.69L17.73 6.45C17.9551 6.7676 18.1557 7.1019 18.33 7.45H19.23C19.9187 7.45791 20.5764 7.73775 21.0597 8.22853C21.543 8.7193 21.8127 9.38122 21.81 10.07V12C21.8021 12.6853 21.525 13.34 21.0386 13.8227C20.5521 14.3054 19.8953 14.5774 19.21 14.58H18.32C18.1561 14.9043 17.9724 15.2182 17.77 15.52L18.22 16.31C18.3869 16.6081 18.4935 16.9361 18.5336 17.2754C18.5736 17.6146 18.5465 17.9585 18.4536 18.2872C18.3607 18.616 18.204 18.9232 17.9923 19.1914C17.7806 19.4595 17.5182 19.6833 17.22 19.85L15.58 20.79C15.2823 20.9583 14.9541 21.0659 14.6146 21.1067C14.275 21.1475 13.9307 21.1206 13.6016 21.0276C13.2725 20.9346 12.9651 20.7774 12.697 20.565C12.429 20.3526 12.2057 20.0892 12.04 19.79L11.6 19.04C11.2273 19.0699 10.8527 19.0699 10.48 19.04L10.02 19.82C9.7941 20.2235 9.46466 20.5595 9.06564 20.7933C8.66662 21.0271 8.21246 21.1502 7.74999 21.15ZM2.84999 9C2.55984 8.99936 2.28055 9.11036 2.06999 9.31C1.96798 9.41258 1.88721 9.53428 1.8323 9.66812C1.77739 9.80197 1.74942 9.94533 1.74999 10.09V11.97C1.76756 12.246 1.88845 12.5053 2.0886 12.6962C2.28875 12.887 2.55345 12.9955 2.82999 13H4.20999C4.35809 12.9976 4.50341 13.0403 4.62666 13.1225C4.7499 13.2047 4.84523 13.3224 4.89999 13.46C5.1331 14.0096 5.43555 14.5271 5.79999 15C5.88933 15.1196 5.94246 15.2623 5.9531 15.4112C5.96373 15.5601 5.93142 15.7089 5.85999 15.84L5.16999 17.01C5.02969 17.2664 4.99044 17.5661 5.05999 17.85C5.13577 18.1289 5.31921 18.3663 5.56999 18.51L7.19999 19.46C7.32515 19.5345 7.4642 19.5828 7.60864 19.6017C7.75309 19.6206 7.89987 19.6098 8.03999 19.57C8.32023 19.4917 8.55993 19.3093 8.70999 19.06L9.39999 17.86C9.47607 17.7326 9.58733 17.6299 9.72038 17.5643C9.85344 17.4987 10.0026 17.4729 10.15 17.49C10.7279 17.56 11.3121 17.56 11.89 17.49C12.0368 17.4665 12.1873 17.4884 12.3213 17.5527C12.4553 17.617 12.5665 17.7208 12.64 17.85L13.32 19.03C13.4646 19.2832 13.7039 19.4686 13.9851 19.5455C14.2664 19.6224 14.5667 19.5844 14.82 19.44L16.45 18.5C16.5767 18.4308 16.6881 18.3366 16.7775 18.2232C16.8669 18.1097 16.9323 17.9794 16.97 17.84C17.0395 17.5561 17.0003 17.2564 16.86 17L16.17 15.8C16.0895 15.6765 16.0467 15.5324 16.0467 15.385C16.0467 15.2376 16.0895 15.0935 16.17 14.97C16.5218 14.5157 16.8142 14.0184 17.04 13.49C17.0893 13.3479 17.183 13.2255 17.3073 13.1409C17.4315 13.0562 17.5798 13.0138 17.73 13.02H19.09C19.3773 13.0314 19.658 12.9318 19.874 12.742C20.0899 12.5521 20.2245 12.2864 20.25 12V10.1C20.2506 9.95533 20.2226 9.81197 20.1677 9.67812C20.1128 9.54428 20.032 9.42258 19.93 9.32C19.8304 9.21603 19.7109 9.13321 19.5786 9.07651C19.4463 9.01981 19.3039 8.99038 19.16 8.99H17.79C17.6417 8.98755 17.4973 8.94174 17.3747 8.85823C17.2521 8.77471 17.1566 8.65714 17.1 8.52C16.8667 7.97457 16.5606 7.46326 16.19 7C16.0999 6.88047 16.047 6.73699 16.0381 6.58755C16.0292 6.43811 16.0647 6.28937 16.14 6.16L16.82 4.98C16.9644 4.72669 17.0024 4.4264 16.9255 4.14513C16.8486 3.86386 16.6632 3.62462 16.41 3.48L14.78 2.5C14.5441 2.3635 14.2644 2.32405 14 2.39C13.7188 2.46638 13.4785 2.64932 13.33 2.9L12.64 4.1C12.5658 4.22917 12.4549 4.33334 12.3214 4.39924C12.1878 4.46513 12.0376 4.48977 11.89 4.47C11.3288 4.40004 10.7612 4.40004 10.2 4.47C10.0538 4.48904 9.9053 4.464 9.77346 4.39808C9.64161 4.33215 9.53246 4.22836 9.45999 4.1L8.73999 2.91C8.59351 2.6588 8.35429 2.47511 8.07379 2.39844C7.79328 2.32177 7.49389 2.35824 7.23999 2.5L5.59999 3.42C5.34708 3.56483 5.16128 3.80331 5.0827 4.08396C5.00412 4.3646 5.03906 4.6649 5.17999 4.92L5.85999 6.13C5.94341 6.26268 5.98255 6.41842 5.97177 6.57478C5.96098 6.73113 5.90084 6.88002 5.79999 7C5.43845 7.4604 5.13609 7.96433 4.89999 8.5C4.84407 8.63681 4.74846 8.75375 4.62548 8.83573C4.5025 8.91772 4.35779 8.961 4.20999 8.96H2.84999V9ZM11 15C10.2089 15 9.43551 14.7654 8.77771 14.3259C8.11992 13.8864 7.60723 13.2616 7.30448 12.5307C7.00173 11.7998 6.92251 10.9956 7.07685 10.2196C7.23119 9.44371 7.61216 8.73098 8.17157 8.17157C8.73098 7.61216 9.44371 7.2312 10.2196 7.07686C10.9956 6.92252 11.7998 7.00173 12.5307 7.30448C13.2616 7.60723 13.8863 8.11992 14.3259 8.77772C14.7654 9.43552 15 10.2089 15 11C15 12.0609 14.5786 13.0783 13.8284 13.8284C13.0783 14.5786 12.0609 15 11 15ZM11 8.5C10.5055 8.5 10.0222 8.64662 9.61107 8.92132C9.19995 9.19603 8.87951 9.58647 8.6903 10.0433C8.50108 10.5001 8.45157 11.0028 8.54803 11.4877C8.64449 11.9727 8.8826 12.4181 9.23223 12.7678C9.58186 13.1174 10.0273 13.3555 10.5123 13.452C10.9972 13.5484 11.4999 13.4989 11.9567 13.3097C12.4135 13.1205 12.804 12.8 13.0787 12.3889C13.3534 11.9778 13.5 11.4945 13.5 11C13.5 10.337 13.2366 9.70107 12.7678 9.23223C12.2989 8.76339 11.663 8.5 11 8.5Z" fill="#3E97FF"/>
            </g>
            </svg>
  );
};

如您所见，在新文件中我添加了某种名为“颜色”的变量，该变量存在于旧文件中。 如果我理解正确的话，这允许从外部设置特定的颜色。

有一个名为 Popup 的元素，带有相关的 CSS 文件，经过测试我发现它确实是与此按钮相关的文件。

按钮的 CSS 块：

  .buttonPrimary {
    ...

    svg {
      margin-left: 10px;
    }

    .color {
      fill: #4fa1f0;
    }

    &:hover {
      @extend %active-button-color;
      color: #fff;

      .color {
        fill: #fff;
      }
    }
  }

我可以看到，悬停时，它的颜色变为白色。 但在我为按钮设置新图标后就不行了！

Popup.tsx 文件返回以下块：

  <div className={renderStyle()} onClick={() => setOpen(!open)}>
    <p>{title && title}</p>
    {renderContent()}
  </div>

RenderContent 函数具有以下“眼睛”图标块。

  const renderContent = useCallback(() => 
  {
    // ...          
    else if (eye) 
    {   
      return <Eye color={styles.color} />;
    } 

    // ...

  }, []);

我为新图标添加了另一个 else-if 块：

else if (views) 
{   
    return <Views color={styles.color} />;
}

由于仪表图标图像显示正确，我相信其方法是正确的。

渲染风格功能：

  const renderStyle = useCallback(() => {
    if (primary) 
    {
      return Primary;
    } 

    // ...

  }, []);

最后是按钮实际放置在屏幕上并分配相关代码的代码：

          <div className={styles.ViewsButton} onClick={resetViewsVisibility}>
            <Popup views primary title="Name"  filterShown={viewsShown} >
              <Views
                //... 
              />
            </Popup>
          </div>

我在研究该问题时验证的内容以及迄今为止我尝试过的内容：

  1. 按钮仍然使用“views”和“primary”变量，因此在 Popup.tsx 内部调用相同的代码。我什至尝试添加一个警报来确保它 - 是的，在两种情况下都运行相同的功能。

  2. 该项目显示正确，因此 svg 文件也正确调用/加载。

  3. 将鼠标悬停在文本上时会重新着色，而图像则不会。

  4. 我不确定我不应该向 svg 添加任何其他内容，因为我尝试在旧项目的 tsx 文件中仅使用新的 svg 块，所以我只替换了它并保留了其他所有内容。此后：“眼睛”图标也没有重新着色。

  5. 我想我确实到处都用“views”替换了变量“eye”，但也许我错过了一些东西。

  6. 我相信图标 tsx 文件中的变量“颜色”是解决问题的方法，但无论出于何种原因，它在新文件中不会执行任何操作。

  7. 我考虑添加一个函数，使用“onMouseOver”事件重新着色图标，但我认为这是一个坏主意，因为必须有一种方法可以使用已经存在的代码，其次我仍然需要在其上获取图标图像拥有的，不是按钮，而是里面的东西。因此必须查看它的单独 id、动态加载它等等。

总结一下： 我相信在这两种情况下都使用相同的代码，但在新情况下，变量“颜色”要么不在 Popup.tsx 文件中设置值，要么在图标 tsx 文件中不执行任何操作。

我可能错过了除了“眼睛”之外还应该添加“视图”的另一个地方，但是在搜索“眼睛”时我没有找到任何其他地方。

请帮助我了解新图标与旧图标相比有何不同。

谢谢你， 叶夫根尼

css reactjs typescript svg
1个回答
0
投票

看起来新图标具有 fill 属性，并且无法通过 css 代码更改它。您可以尝试将填充设置为“currentColor”，或者完全删除它并仅在 css 中设置图标颜色。

fill="currentColor"
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.