写在之前的废话回到2013年，React就凭空诞生了。但是那个时候，我们会想，天啊！我们好不容易分离了HTML/CSS/JS，为什么会出现JSX，还要把HTML和JS耦合在一起？React在JS中创建HTML。在React中，我们知道一切都是组件。那么既然HTML可以用js写，那我们为什么不一起写CSS呢？这不是一个真正的组件吗？Styled-components为React而生，是CSSinJS的下一代解决方案。以前我们想要实现css作用域，需要在webpack中进行各种配置，或者使用js方案。对于styled-components，你只需要importstyledfrom'styled-components'；甚至与React的完美结合，不仅来自于TagName，还来自于Props。让我们的代码更语义化、更可维护、更高效。当然，我们不需要考虑它的学习成本，只要你用过CSS或者SASS，就可以马上上手，因为它本身就是一个超集。接下来，我会逐步介绍一些我在这段时间里非常喜欢的独特功能。starterconstButton=styled.button`背景：#abcdef；边界半径：3px；边框：无；颜色：白色；`；console.log（按钮）；//styledcomponentconsole.log(newButton());//reactcomponentexportdefaultCustomButtonextendsReact.component{render(){return}}styled-components使用taggedtemplatesyntax直接编写样式供我们创建组件。styled-components的继承方式有两种继承样式如下constButton=styled.button`background:#abcdef;边界半径：3px；边框：无；颜色：白色;`;constOtherButton1=styled(button)``;constOtherButton2=button.extend``;//旧的写法不推荐，以后会弃用。第一种写法的继承只会创建不同的css规则，而第二种写法会复制base组件的css规则。然后添加不同的css权重覆盖。不推荐当然，还有一个有趣的“继承”withComponent，我们可以使用withComponent来改变渲染的标签constLi=styled.li`color:#abcdef;`;constA=Li.withComponent('a');//将渲染编译后的a标签，它们将使用不同的className，如果我们想使用相同的样式但不同的标签，这将非常有用。样式覆盖这里所说的样式覆盖主要是一些交互行为（hover、active）的覆盖。其实组件继承也是一种覆盖。以前我们的覆盖方式是这样的：constListItem=styled.li`padding:0;高度：48px；&.left-item-focus{.left-link{背景：${props=>props.color};}}&:hover{.left-icon{颜色：#9e9e9e;//500}}`;在styled中，我们可以使用styled-components组件来引用我们的DOM来覆盖样式，如下constIcon=styled。span`color:red;`;constListItem=styled.li`&:hover${Icon}{color:green;}`;这仍然是我们以往的思路去重写样式，但是我们直接使用选择器给有样式的组件引用即可。有了这样的接口，我们就不用去想我们需要给组件赋予什么className或者id，从而达到重写样式的做法。不过，还有一种写法是我最喜欢的。TIPS：组件引用必须是styled-components的封装组件，如果直接react会报错constListItem=styled.li``;constIcon=styled.span`颜色：红色；${ListItem}:hover&{//&代表图标组件颜色：绿色；}`;这段代码实现了同样的功能，但是我们换了个思路。可以发现这样的代码侵入性较小。更符合开放封闭的原则。当我们不需要Icon组件时，直接删除Icon即可。我们不需要去父组件中去寻找组件相关的样式，也不容易造成样式污染。突然，我觉得眼前一亮，为什么不呢！当然，这个“子组件引用父级”功能的引用范围更广。您可以选择DOM的任何父级，然后自己覆盖样式。如下：constIcon=styled.span`color:red;html.ie-8&{//他妈的ie8颜色：蓝色；}body.xxx&{颜色：绿色；}`;当任何父级具有类Icon样式时，将被覆盖。这种“子组件引用父组件”功能也是我最喜欢的功能之一。正如您在上面看到的，我们广泛使用&作为选择器，而&还有另一个技巧。const示例=styled.li`颜色：红色；&{颜色：蓝色；}&&{颜色：绿色；}`;你能猜到最后会渲染什么吗？最终会被编译成下面的class，但是我们其中一个&代表一个classweight，也就是说我们最后会渲染宽恕色，因为应用了li到。fmpfVE。fmpfVE样式表。这个功能非常有用。比如当你使用了第三方组件，想要覆盖它的样式时，我们可以通过添加多个&来增加样式权重，从而覆盖掉第三方组件的样式。Theme只是想说一下Theme，那就是第三方组件应该如何传入Theme？我们有一个简单的技巧。比如使用Material-UI，如果我们需要基于它扩展自己的组件，需要样式。constThemeProvider:React.SFC=({themeName,children})=>{consttheme=themes[themeName];}返回（之后，我们只需要使用styled-components提供的withTheme来包装我们需要调用的组件即可获取我们的主题。这样我们的styled-components中就可以获取到theme，也可以获取到material。以上都是我们的技能。看了这么多有趣的黑科技，你是不是还爱上了styled-components？个人网站http://www.meckodoGithub：https://github.com/MeCDodo
