react中classNames动态控制样式

一.动态控制样式

第一种，可以同过className={cs({morewidth: isShowInput}, style["btn-group"])}，true或者false控制样式是否显示;

1.首先就是引入css样式，classNames:

image.png

2.在constructor里面设置state状态：

image.png
3.最后在render里面引入这个类名，进行动态控制样式：
image.png

第二种，可以同过className={ cs( style[filetype], style["type"] ) }传入一个变量来动态切换显示哪种样式;

image.png

第三种，可以同过className={cs("resource_container",style["resource"])}，这时resource_container不会被编译为有后缀的类名，这时可以直接在global里使用修改Ant Design里的默认样式

image.png

第三种，关于使用className写一些优秀组件的写法;

1.公共组件代码:

image.png

2.样式代码：

image.png
image.png
3.公共组件的使用;
image.png

首先通过公共组件里的const { position, height, width, borderWidth } = props;进行props进行传值，然后在使用的过程中通过四个属性来进行控制显示哪个边角：position="左上" width="7px" height="7px" borderWidth="2px"，在公共组件里使用classNames，通过布尔值和三目运算进行动态选择样式，从而实现不同的边角效果。