styled-components中的一些常规操作

    在styled-components初识这篇博客里面介绍了一些基础的用法,接下来说说我在项目中使用styled-components的一些常规操作,

 1、修改标签类型

当我们定义好一个button 的样式以后 ,我们又想要一个a 标签的 button , 这可怎么办?,难道又要从新定义一个相同一毛一样只是标签类型不同的新button吗?这样太难受了,styled-components 非常贴心,他给我们提供了一个修改标签类型的 方法 wichComponent

a.jpeg 

这样就重复利用了我们的代码。


 2、全局样式

有些时候,在开发中需要设置一些全局的样式,这个该怎么处理呢?典型的,当我们想要为body元素设置一些属性时,该怎么办呢?

别担心,styled-components提供了 injectGlobal 方法来实现它。调用 injectGlobal 并不会返回一个组件,而是会将 injectGlobal 中的css相关样式直接添加到<style>标签内部。同样的,需要导出 injectGlobal 方法:b.jpeg


 3、声明静态props 

目的是为了传不必要的值,代码如下:

e.jpeg


  4、使用styled-components的一些优点

① 、压缩了样式代码。 使用styled-components可以有效的简化部分样式代码的编写。

②、写出更清爽的JSX代码 。

       p.jpeg

③、实现了样式的组合与继承 。

④、属性过滤 (  attrs )。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容