资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Styled-Components

Styled-Components

ingood / 1038人阅读

摘要：它是通过改变编写方式的解决方案之一，从根本上解决常规编写的一些弊端。通过来为赋能，我们能达到常规所不好处理的逻辑复杂函数方法复用避免干扰。他搭配可能将模块化走向一个更高的高度，样式书写将直接依附在上面，三者再次内聚。

Styled-Components 
</>复制代码 
  1. 它是通过JavaScript改变CSS编写方式的解决方案之一，从根本上解决常规CSS编写的一些弊端。
    通过JavaScript来为CSS赋能，我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。
    尽管像SASS、LESS这种预处理语言添加了很多用用的特性，但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法，虽然比较有用，但是它完全是自选方案，不能被强制应用在语言或者工具层面。
    他搭配React可能将模块化走向一个更高的高度，样式书写将直接依附在JSX上面，HTML、CSS、JS三者再次内聚。
基本 安装 
</>复制代码 
  1. npm install --save styled-components

除了npm安装使用模块化加载包之外，也支持UMD格式直接加载脚本文件。

</>复制代码
入门

styled-components使用标签模板来对组件进行样式化。

它移除了组件和样式之间的映射。这意味着，当你定义你的样式时，你实际上创造了一个正常的React组件，你的样式也附在它上面。

这个例子创建了两个简单的组件，一个容器和一个标题，并附加了一些样式。

</>复制代码 
  1. // Create a Title component that"ll render an 
     tag with some styles
  2. const Title = styled.h1`
  3.   font-size: 1.5em;
  4.   text-align: center;
  5.   color: palevioletred;
  6. `;
  7. // Create a Wrapper component that"ll render a 
     tag with some styles
  8. const Wrapper = styled.section`
  9.   padding: 4em;
  10.   background: papayawhip;
  11. `;
  12. // Use Title and Wrapper like any other React component – except they"re styled!
  13. render(
  14.   
  15.     <span class="hljs-tag"></<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">li</span>></span>      Hello World, this is my first styled component!<span class="hljs-tag"></<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">li</span>></span>    
  16.   
  17. );
</>复制代码 
  1. 注意
    CSS规则会自动添加浏览器厂商前缀，我们不必考虑它。
透传props

styled-components会透传所有的props属性。

</>复制代码 
  1. // Create an Input component that"ll render an  tag with some styles
  2. const Input = styled.input`
  3.   padding: 0.5em;
  4.   margin: 0.5em;
  5.   color: palevioletred;
  6.   background: papayawhip;
  7.   border: none;
  8.   border-radius: 3px;
  9. `;
  10. // Render a styled text input with a placeholder of "@mxstbr", and one with a value of "@geelen"
  11. render(
  12.   
  13.     
  14.     
  15.   
  16. );
基于props做样式判断

模板标签的函数插值能拿到样式组件的props，可以据此调整我们的样式规则。

</>复制代码 
  1. const Button = styled.button`
  2.   /* Adapt the colours based on primary prop */
  3.   background: ${props => props.primary ? "palevioletred" : "white"};
  4.   color: ${props => props.primary ? "white" : "palevioletred"};
  5.   font-size: 1em;
  6.   margin: 1em;
  7.   padding: 0.25em 1em;
  8.   border: 2px solid palevioletred;
  9.   border-radius: 3px;
  10. `;
  11. render(
  12.   
  13.     
  14.     
  15.   
  16. );
样式化任意组件 
</>复制代码 
  1. // This could be react-router"s Link for example
  2. const Link = ({ className, children }) => (
  3.   
  4.     {children}
  5.   
  6. )
  7. const StyledLink = styled(Link)`
  8.   color: palevioletred;
  9.   font-weight: bold;
  10. `;
  11. render(
  12.   
  13.     Unstyled, boring Link
  14.     
  15.     Styled, exciting Link
  16.   
  17. );
扩展样式

我们有时候需要在我们的样式组件上做一点扩展，添加一些额外的样式：
需要注意的是.extend在对样式组件有效，如果是其他的React组件，需要用styled样式化一下。

</>复制代码 
  1. // The Button from the last section without the interpolations
  2. const Button = styled.button`
  3.   color: palevioletred;
  4.   font-size: 1em;
  5.   margin: 1em;
  6.   padding: 0.25em 1em;
  7.   border: 2px solid palevioletred;
  8.   border-radius: 3px;
  9. `;
  10. // We"re extending Button with some extra styles
  11. const TomatoButton = Button.extend`
  12.   color: tomato;
  13.   border-color: tomato;
  14. `;
  15. render(
  16.   
  17.     
  18.     Tomato Button
  19.   
  20. );

在极少特殊情况下，我们可能需要更改样式组件的标签类型。我们有一个特别的API，withComponent可以扩展样式和替换标签：

</>复制代码 
  1. const Button = styled.button`
  2.   display: inline-block;
  3.   color: palevioletred;
  4.   font-size: 1em;
  5.   margin: 1em;
  6.   padding: 0.25em 1em;
  7.   border: 2px solid palevioletred;
  8.   border-radius: 3px;
  9. `;
  10. // We"re replacing the 
  11. const Link = Button.withComponent("a")
  12. // Use .withComponent together with .extend to both change the tag and use additional styles
  13. const TomatoLink = Link.extend`
  14.   color: tomato;
  15.   border-color: tomato;
  16. `;
  17. render(
  18.   
  19.     
  20.     Normal Link
  21.     Tomato Link
  22.
); 添加attr

我们可以使用attrsAPI来为样式组件添加一些attr属性，它们也可以通过标签模板插值函数拿到props传值。

</>复制代码 
  1. const Input = styled.input.attrs({
  2.   // we can define static props
  3.   type: "password",
  4.   // or we can define dynamic ones
  5.   margin: props => props.size || "1em",
  6.   padding: props => props.size || "1em"
  7. })`
  8.   color: palevioletred;
  9.   font-size: 1em;
  10.   border: 2px solid palevioletred;
  11.   border-radius: 3px;
  12.   /* here we use the dynamically computed props */
  13.   margin: ${props => props.margin};
  14.   padding: ${props => props.padding};
  15. `;
  16. render(
  17.   
  18.     
  19.     
  20.     
  21.   
  22. );
动画

带有@keyframes的CSS animations，一般来说会产生复用。styled-components暴露了一个keyframes的API，我们使用它产生一个可以复用的变量。这样，我们在书写css样式的时候使用JavaScript的功能，为CSS附能，并且避免了名称冲突。

</>复制代码 
  1. // keyframes returns a unique name based on a hash of the contents of the keyframes
  2. const rotate360 = keyframes`
  3.   from {
  4.     transform: rotate(0deg);
  5.   }
  6.   to {
  7.     transform: rotate(360deg);
  8.   }
  9. `;
  10. // Here we create a component that will rotate everything we pass in over two seconds
  11. const Rotate = styled.div`
  12.   display: inline-block;
  13.   animation: ${rotate360} 2s linear infinite;
  14.   padding: 2rem 1rem;
  15.   font-size: 1.2rem;
  16. `;
  17. render(
  18.   <            
  19.                
  20.                                            
  21.                        
  22.
云服务器 GPU云服务器 styled-components

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113197.html

相关文章

  • styled-components 中文文档翻译及不完全指北

    摘要：前言官方文档地址中文文档地址是一个的第三方库，是的优秀实践。初次了解是在读林昊翻译的设计模式与最佳实践一书时。能力所限，已翻译部分可能仍有字词错误或语句不通顺的地方，欢迎有能力的同学帮助纠正。就是其中的佼佼者。 前言 官方文档地址： https://www.styled-components.com/ 中文文档地址：https://github.com/hengg/styled-com...

    Vicky 评论0 收藏0

  • styled-components 中文文档翻译及不完全指北

    摘要：前言官方文档地址中文文档地址是一个的第三方库，是的优秀实践。初次了解是在读林昊翻译的设计模式与最佳实践一书时。能力所限，已翻译部分可能仍有字词错误或语句不通顺的地方，欢迎有能力的同学帮助纠正。就是其中的佼佼者。 前言 官方文档地址： https://www.styled-components.com/ 中文文档地址：https://github.com/hengg/styled-com...

    OnlyLing 评论0 收藏0

  • 五分钟 Styled-components 高级实用技巧

    摘要：甚至完美的结合，不仅是从上，还有上。开胃菜用了语法，直接为我们编写样式创建组件。其实组件继承也算是覆盖的一种。如下当任何父级带有都会覆盖的样式。在上面可以看见我们大量使用了作为选择器，而还有另外的技巧。 写在前面的废话 回到2013年，React凭空出世。但是在那时，我们会想，oh shit! 我们好不容易分离了HTML/CSS/JS, 为什么出现了JSX，我们又需要把HTML和JS耦...

    Profeel 评论0 收藏0

  • 五分钟 Styled-components 高级实用技巧

    摘要：甚至完美的结合，不仅是从上，还有上。开胃菜用了语法，直接为我们编写样式创建组件。其实组件继承也算是覆盖的一种。如下当任何父级带有都会覆盖的样式。在上面可以看见我们大量使用了作为选择器，而还有另外的技巧。 写在前面的废话 回到2013年，React凭空出世。但是在那时，我们会想，oh shit! 我们好不容易分离了HTML/CSS/JS, 为什么出现了JSX，我们又需要把HTML和JS耦...

    DevYK 评论0 收藏0

  • 从零到一 styled-components 4.x 的使用

    摘要：废话不多话，来上车安装或者简述使用创建全局的样式首先创建一个文件，例如引全局包里面为项目需要的内容在组件内把引入的当做标签写入创建一个局部的样式引局部包里面为项目需要的内容在组件内把引入的当做标签写入类嵌套类似于用法大同小异列举 废话不多话，来上车！ 安装： npm install --save styled-components （或者 yarn add styled-com...

    Yuqi 评论0 收藏0

  • React中使用外部样式的3中方式

    摘要：一关于的认识是一种使用编写样式的处理方案。意味着你不需要关心如何检测和删除那些未使用的代码。支持变量和继承你可以使用变量来设置不同的样式，使用这些不同样式时只需要给样式组件传递一个参数即可。 一、关于css-in-js的认识 1、css-in-js是一种使用 js 编写 css 样式的 css 处理方案。它的实现方案有很多，比如styled-components、polished、glam...

    vboy1010 评论0 收藏0

发表评论

登陆后可评论

0条评论

ingood

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<