一.动态控制样式
第一种,可以同过className={cs({morewidth: isShowInput}, style["btn-group"])},true或者false控制样式是否显示;
1.首先就是引入css样式,classNames:
2.在constructor里面设置state状态:
3.最后在render里面引入这个类名,进行动态控制样式:
第二种,可以同过className={ cs( style[filetype], style["type"] ) }传入一个变量来动态切换显示哪种样式;
第三种,可以同过className={cs("resource_container",style["resource"])},这时resource_container不会被编译为有后缀的类名,这时可以直接在global里使用修改Ant Design里的默认样式
第三种,关于使用className写一些优秀组件的写法;
1.公共组件代码:
2.样式代码:
3.公共组件的使用;
首先通过公共组件里的const { position, height, width, borderWidth } = props;进行props进行传值,然后在使用的过程中通过四个属性来进行控制显示哪个边角:position="左上" width="7px" height="7px" borderWidth="2px",在公共组件里使用classNames,通过布尔值和三目运算进行动态选择样式,从而实现不同的边角效果。