问题:
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