activeClass

Link标签点击时，没有变色，没有效果，用NavLink，然后添加active class属性
搜索，activeClass
使用的官方介绍，reactrouter.com/docs/en/v6/…

• Link换成NavLink
• 给NavLink增加属性activeClassName属性，发现没有activeClassName属性，在react-router的 NavLink中搜索activeClassName，看到这么一句

One difference as of v6.0.0-beta.3 is that activeClassName and activeStyle have been removed from NavLinkProps
可知，react-router v6已经不支持activeClassName了，继续 Instead, you can pass a function to either style or className that will allow you to customize the inline styling or the class string based on the component's active state

按照文档的提示，得到了react-router v6 中 activeClassName的使用方法

> li {
  flex-grow: 1; // flex布局占比放大
  > a {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 24px;
      height: 24px;
    }
    &.selected {
      color: red;
      .icon {
        fill: red;
      }
    }
  }
}
……………………
return (<NavWrapper>
    <ul>
        <li>
            <NavLink to="/tags" className={({ isActive }) =>
                isActive ? "selected" : undefined
            }><Icon name={"tag"}/>标签页</NavLink>
        </li>
        <li>
            <NavLink to="/money" className={({ isActive }) =>
                isActive ? "selected" : undefined
            }><Icon name={"money"}/>记账页</NavLink></li>
        <li>
            <NavLink to="/statistics" className={({ isActive }) =>
                isActive ? "selected" : undefined
            }><Icon name={"chart"}/>统计页</NavLink></li>
    </ul>
</NavWrapper>);

这段代码上文有个类选择器selected，代码中className={({ isActive }) => isActive ? "selected" : undefined }表示，选中的情况下，激活类选择器selected

解决svg文件中包含fill属性的情况，

• 某个svg图标的fill不起作用，因为这个svg本身就有fill属性，那么要删除，用外部传入的，怎么删除呢，用svgo-loader删除
• 通过svgo-loader的配置，删除svg文件中不需要的属性
• 按照视频的方法，无效，可能因为svgo版本的关系，那么，找到svgo文档，修改
• svgo-loader文档中的方法（https://github.com/svg/svgo-loader），与视频不一样

{
            loader: 'svgo-loader',
            options: {
              configFile: './scripts/svgo.config.js'
            }
          }

根据文档中的提示 See how to configure svgo ，拷贝的配置文件，存放在src目录下，运行报错

Error: Cannot find module 'D:\Desktop\html\.Project\come-up-account\src\icons\scripts\svgo.c
onfig.js'

那么，就把配置文件按照报错的位置放在那里
再运行，仍报错，仔细看svgo-loader文档，点击去svgo链接，然后按照svgo文档的要求，安装svgo: yarn global add svgo 再运行，报错 终端，再运行，OK。（可能有时候莫名其妙的依赖错误，安装错误，要删除node_modules，再运行）

• 可是，怎么写配置文件呢，还是看文档（github.com/svg/svgo#co…
  找到文档中removeAttrs，点进去，找到了

plugins: [
  {
    name: "removeAttrs",
    params: {
      attrs: "(fill|stroke)"
    }
  }
]

找到svgo-loader的配置文件，svgo.config.js，拷贝进去
运行，不生效，
中断，重新运行，生效

其他

设置webstorm字体，Editor,Font，JetBrains