ReactRouter之activeClassName

现阶段点击不同的links时页面切换的不明显，可以使用 activeClassName 使点击标签高亮

步骤：Google--React Router--进入官网--NavLink--activeClassName:string--CRM

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

注意，当icons自带颜色时

&.selected{
  color: goldenrod;
  .icon{
    fill: goldenrod;//icon自带颜色所以本句无用，启用方式见webpack.config.js中的svgo options注释
  }

fill 无效，需要将svgo loader的option变更为

{loader: 'svgo-loader', options: {plugins: [{removeAttrs: {attrs: 'fill'}}]}}

即可，但本项目中icons自带颜色比较好看，所以不启用svgo loader

styled-components自定义组件

小技巧：多行文本需要用同一个标签包围时，可以 shift shift 打开面板--Actions--搜索 surround with emmet --点击后输入需要的标签，以*结尾表示多个,如 li*

Money.tsx主体部分

function Money() {
    return (
        <Layout>
            <TagsSection>
                <ol>
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ol>
                <button>新增标签</button>
            </TagsSection>
            <NotesSection>
                <label>
                    <span>备注</span>
                    <input type="text"/>
                </label>
            </NotesSection>
            <CategorySection>
                <ul>
                    <li>支出</li>
                    <li>收入</li>
                </ul>
            </CategorySection>
            <NumberPadSection>
                <div>
                    100
                </div>
                <div>
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>OK</button>
                    <button>0</button>
                    <button>.</button>
                </div>
            </NumberPadSection>
            <h2>记账页面</h2>
        </Layout>
    )
}

TagsSection

const TagsSection = styled.section`
  background: white;
  padding: 12px 16px;

  > ol {
    margin: 0 -12px;

    > li {
      background: #D9D9D9;
      border-radius: 18px;
      display: inline-block;
      padding: 3px 18px;
      font-size: 14px;
      margin: 8px 12px;
    }
  }

  > button {
    background: none;
    border: none;
    color: #666;
    padding: 2px 4px;
    margin-top: 8px;
  }
;

`

NotesSection

小技巧：防止文本被折行可用 white-space: nowrap;

const NotesSection = styled.section`
  background: #f5f5f5;
  padding: 0px 16px;
  font-size: 14px;
  >label{
    display: flex;
    align-items: center;
    >span{
      margin-right: 16px;
      white-space: nowrap;
    }
    >input{
      display: block;
      width: 100%;
      height: 72px;
      background: none;
      border: none;
    }
  }
`

CategorySection

const CategorySection = styled.section`
  font-size: 24px;

  > ul {
    display: flex;
    background: #c4c4c4;

    > li {
      width: 50%;
      text-align: center;
      padding: 16px 0;

      &.selected {
        background: #ffd833;
      }
    }
  }

`

NumberPadSection

const NumberPadSection = styled.section`
  display: flex;
  flex-direction: column;

  > .output {
    background: white;
    font-size: 36px;
    line-height: 72px;
    text-align: right;
    padding: 0 16px;
    box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.25),
    inset 0 5px 5px -5px rgba(0, 0, 0, 0.25);
  }

  > .pad {
    > button {
      font-size: 18px;
      float: left;
      width: 25%;
      height: 64px;
      border: none;

      &.ok {
        height: 128px;
        float: right;
      }
      &.zero{
        width: 50%;
      }
      &:nth-child(1){
        background: #f2f2f2;
      }
      &:nth-child(2),
      &:nth-child(5){
        background: #e0e0e0;
      }
      &:nth-child(3),
      &:nth-child(6),
      &:nth-child(9){
        background: #d3d3d3;
      }
      &:nth-child(4),
      &:nth-child(7),
      &:nth-child(10){
        background: #c1c1c1;
      }
      &:nth-child(8),
      &:nth-child(11),
      &:nth-child(13){
        background: #b8b8b8;
      }
      &:nth-child(12){
        background: #9a9a9a;
      }
      &:nth-child(14){
        background: #a9a9a9;
      }
    }
  }

`

模块化：防止文件过长