完善页面样式

使用SVG Symbol

yarn add --dev svg-sprite-loader
yarn add --dev svgo-loader

自定义webpack.config

• 首先yarn eject拿到webpack配置(webpack.config.js)

{
    test: /\.svg$/,
        use: [
            {loader: 'svg-sprite-loader', options: {}},
            {loader: 'svgo-loader', options: {}}
        ]
},

• 然后根据svg-sprite-loader的文档进行CRM

---

ReactRouter 之 activeClassName

使用<NavLink></NavLink>标签

import { NavLink } from 'react-router-dom';

<NavLink to="/tags" activeClassName='selected'>
    <Icon name="tag"></Icon>
    标签页
</NavLink>

被选中的路由
被选中的路由会增加一个selected的class，然后给这个class加相应的样式。 去除svg默认填充色

---

style-components传入ClassName的方法

const MyLayout = styled(Layout)`
  display: flex;
  flex-direction: column;
`

const Layout = (props: any) => {
    return (
        <Wrapper>
            <Main className={props.className}>
                {props.children}
            </Main>
            <Nav></Nav>
        </Wrapper>
    )
}

在需要接受的子组件中使用props传className，样式写在父组件上面↑

image.png