结合 styled-components 修改 antd 组件CSS样式

问题：

antd 有的组件提供了 style API，但是行内style没法修改比如hover（鼠标移入）之类的属性。

思路：

新建一个 styled-components 组件 Test 包裹在想要修改的antd组件外，然后通过从 Test 中操作其子代CSS样式对目标antd组件进行样式修改。

eg. 目标是修改antd的 Button 组件 hover 时的CSS， 使Button在鼠标移入时变宽

style.js

//创建一个styled-components组件

import styled from 'styled-components';
export const Test= styled.div`
    // 待填
`

index.js

// 引入Test 组件
import { Test } from ‘./style’
// 引入antd的Button组件
import { Button } from 'antd'

// 随便写个主组件
class WWW extends PureComponent {
    render() {
        return (
            <Test>
            	<Button className = “test”/> // 把目标组件包裹在内 给个类名test
            		test
            	<Button/>
            <Test/>
        )
    }
}
class 

修改style.js

import styled from 'styled-components';
export const Test= styled.div`
    // 待填
    //直接类名选择
    > .test:hover {
        width: 100px;
    }
`

修改前 hover

修改后 hover