【React_Antd】Table样式修改

React项目中，使用antd中的Table组件，其样式略有些死板。下面记录一些常见的样式修改问题，及解决方法。

一共有三种方法。

React定义columns的时候，title属性的值，可以是dom。所以在这儿添加div就可以了。其样式会覆盖table原本的背景。

扣一张矩形的背景透明的斜线图片出来，作为表头所在div的背景。这样，当表头所在div发生变化时，背景图片也会随着变化。

缺点 ：

线的粗细也会发生变化。变化幅度小时不明显，如果拉得特别大，线会变粗，像素可能会不够。

其他 ：

Svg图片不知道可不可以。。。

建议从这里抄作业：https://blog.csdn.net/weixin_42304808/article/details/106352850

注意每个属性的后面有逗号，颜色自己改

直接对背景div添加斜线，上层要显示的内容，做好排版即可

如果表头有两个，那么也可以看成是4个拼在一起

第2和第3块显示内容，第1和第4块显示斜线，也可以

直接一个div，高度设为1px，你就能得到一条直线了（也可以把div的某一条border边框作为直线)。通过css中的旋转属性，即可得到斜线。

每个column，利用其title.length*18+20作为其width值，每一列的宽度都能自适应其表头字数。

但是如果要让列宽适应于非表头部分，可能还要另想办法

Scollar属性中的x设置为＂max-content＂

每一列width根据title长度动态生成

Scollar属性中的y设置为true，再在样式文件中，设置其max-height。

这样做的好处是，max-height的大小可以根据其父组件的高度自适应。适用于某些情况

在react中设置css样式

以上是行内式的样式设置，渲染的结果是

当然还可以使用require直接引入.css文件的，但由于还是初学，并未涉及，以后补上

react中的条件语句的写法

1.三元表达式

在create-react-app脚手架工具里的表现为

  为了快速开发，我们做项目时经常引用第三方的UI组件库，如Zent、Ant Design等。

  有时候，引用第三方组件的样式与我们自己写的组件的样式差异很大，我们需要修改第三方组件的默认样式。

  上面的方式是可以修改第三方组件的样式的，但有一个隐患，因为外面的标识名字是我们起的，它是全局的，是有可能与其他处的className冲突的，最好的方式是写成局部的样式，就像是vue中的/deep/ ，我想利用css Module的方式，生成一个不重复的className，

  但是，在编译时，却把我写的局部的css给筛除掉了，应该是编译工具做了tree shakeing导致的。

  这也是现在困扰我的一个问题，react如何设置才能像vue 的/deep/那样局部修改组件的css样式？

---