最近需要做一个表格组件，组件需求：指定行，列可以跨行，跨列行和行有分割线，最后用grid实现需求。在实现的时候遇到了一个问题。如果css和js分开写，css只能是固定值，没有灵活性。所以考虑在js中使用css的形式。关于js中css相关概念的介绍可以参考阮一峰老师的文章：js中css介绍。我在github上搜索了这方面的组件，发现styledcomponents很好用，简单易用，npm下载：`npmistyled-components-S`注意：React<16需要下载3.x.x版本根据文档并先写一个简单的demo。可以看出它的实现并不是传统的以对象的形式写样式的方式，而是将需要设置样式的元素添加到样式化的对象中，后面跟着一个(``)反引号标签，里面用普通的css格式写作风格。然后返回一个组件，用组件替换原来的div。实现效果：html代码：css代码：刚才我们添加样式的元素是一个html元素，那么给组件添加样式是不是就可以了呢？实践一下：constH1=({className})=>我是App;constHH=styled.H1`字体大小：30px；颜色：红色；`；运行，错误：发生了什么事？原来styled不支持以.符号，需要作为参数传递。修改以上代码constHH=styled(H1)`font-size:30px;颜色：红色；`；并将H1组件作为参数传递给Give样式，就是这样。我想给一个元素添加伪元素样式。是否可以添加子元素样式？没问题，有样式的组件支持样式嵌套，按照类似Less或Scss的写法即可。constContainer=styled.div`width:300px;最大宽度：500px；最小宽度：200px；transition:全部为1的缓入缓出；背景色：rgba(240,240,240,0.9)；在{内容：'之后'；显示：表格；颜色：蓝色；}span{颜色：绿色；}`;上面我们写的组件都是在Class之外的，那么根据props来设置样式怎么办呢？styledcomponents也支持在Class中生成组件并接受props传递的值。这个props不是我们Class收到的props，是元素上的Props用来添加样式的，意思是classDemo{render(){return}}Demo.defaultProps={age:18}constStyled=styled.p`color:${props=>{console.log(props)}}//{name:"guoshi",theme:{...}}`如果你想要什么使用类道具？看代码：generateStyle=()=>{const{row,col,justify,data,prefixCls,showborder=true,rowgap=0,colgap=0}=this.props;const孩子=[];data.map((item,index)=>(item.colSpan||item.rowSpan)?child.push({index:index+1,colSpan:item.colSpan,rowSpan:item.rowSpan}):null);缺点tbordernone=[];for(leti=0;i{letarr=[];arr.length=col;返回arr.fill('1fr').join('');}};网格模板行：${()=>{letarr=[];arr.length=行；返回arr.fill('1fr').join('');}};网格间隙：${rowgap}${colgap};对齐项目：${()=>对齐||“中心”};::before{显示：无；}li{width:100%!important;}${child.map(({index,colSpan,rowSpan})=>`li:nth-child(${index}){grid-column-start:${index%col===0?索引：索引%col}；网格列端：${colSpan?(colSpan+(index%col===0?index:index%col)):((index%col===0?index:index%col)+1)}grid-row-start:${Math.ceil(索引/列)};网格行端：${rowSpan?rowSpan+Math.ceil(索引/列):Math.ceil(索引/列)+1};对齐项目：开始；}`).join('')}li+li{border-left:1pxdashedrgba(0,0,0,0.3);}${bordernone.map(bordernoneindex=>`li:nth-child(${bordernoneindex}){border-left:none;}`).join('')}`;返回UlContainer；}提前放出最后的代码，styled.ul.attrs({})是给元素添加额外的属性，比如className，placeholder等，从代码可以看出，无论是Classprops还是The可以接收元素本身传入的props和styled。你可以自定义任何你想实现的规则，这样更方便我们配置的灵活性。其实使用起来是没有问题的。关键帧等规则官网上有demo，也很容易实现。想尝试的朋友现在可以打码了。然而，这一章留下了很多问题：styled.div和styled(div)有什么区别？模板字符串中的样式是如何解析的？为什么可以嵌套？为什么要返回一个组件？下一章，我将根据styledcomponnets的源码来回答以上问题。最后，祝你生活愉快。
