从一个按钮实例入门CSS in JS之styled-components

前言

最近接手一个react项目，项目中使用的 CSS in JS方案来实现CSS模块化，它使用的包是styled-components
我以前的项目Vue居多的，Vue是很简单的通过scoped就可以实现模块化CSS，当然也在项目中用过CSS Modules方案，但CSS in JS还是第一次接触到，正好趁这个时机学习一下，在做demo时候把平时开发用的比较高频的CSS特性都试了一下，最终完成了一个小按钮demo，突然发现它是一个不错的用来入门styled-components不错的小案例，特记录
styled-components介绍

主要作用是它可以编写实际的CSS代码来设计组件样式，也不需要组件和样式之间的映射，即创建后就是一个正常的React组件,在一个组件内会将结构、样式和逻辑写在一起，虽然这违背了关注点分离的原则，但是这有利于组件间的隔离
使用styled-components不需要再使用className属性来控制样式，而是将样式写成更具语义化的组件的形式，使用style-components会随机生成一个class名称，这样保证每个元素的样式名都是唯一的，当然因为随机生成，维护会增加难度，很难通过样式名定位到元素
入门styled-components的小按钮效果

小按钮的关键代码

1. import styled, { keyframes, createGlobalStyle, css } from 'styled-components'
3. const Wrap = styled.div`
4.   width: 100%;
5.   height: 100vh;
6.   display: flex;
7.   flex-direction: column;
8.   justify-content: center;
9.   align-items: center;
10.   gap: 20px;
11. `
13. // css帧动画
14. const aniTag = keyframes`
15.   0% {
16.     opacity: 0;
17.     transform: translateY(-100%);
18.   }
19.   100% {
20.     opacity: 1;
21.     transform: translateY(0);
22.   }
23. `
25. const MyButton = styled.div`
26.   width: 400px;
27.   height: 80px;
28.   border:1px solid gray;
29.   border-radius: 10px;
30.   overflow: hidden;
31.   display: flex;
32.   flex-direction: column;
33.   justify-content: center;
34.   align-items: center;
35.   position: relative;
36.   // 传参
37.   background-color: ${props => props.bgNormalColor ? props.bgNormalColor : 'blue'};
38.   transition: background-color 0.3s ease-in-out;
39.   // 伪元素
40.   &::after{
41.     content: 'after';
42.     height: 20px;
43.     font-size: 14px;
44.     line-height: 20px;
45.     padding:0 5px;
46.     border-radius: 0 0 6px 6px;
47.     position: absolute;
48.     top: 0;
49.     right: 10px;
50.     background-color: yellow;
51.     color: ${props => props.hightightColor ? props.hightightColor : 'white'};
52.     opacity: 0;
53.   }
54.   // 子孙选择器
55.   p {
56.     line-height: 24px;
57.     color: ${props => props.normalColor ? props.normalColor : 'black'};
58.     transition: color 0.3s ease-in-out;
59.   }
60.   // 当有全局样式的时候，使用&&提高局部样式优先级来覆盖全局样式
61.   && span{
62.     color: rgba(255,0,255,0.6);
63.   }
64.   // 类选择器
65.   .emphasize{
66.     text-decoration: underline;
67.   }
68.   // 伪类
69.   &:hover{
70.     background-color: ${props => props.bgHighlightColor ? props.bgHighlightColor : 'yellow'};
71.     p{
72.       color: ${props => props.hightightColor ? props.hightightColor : 'white'};
73.     }
74.     // css animation动画
75.     &::after{
76.       animation: ${aniTag} 0.4s ease-in-out forwards;
77.     }
78.   }
79. `
81. // 全局样式
82. const GlobalStyle = createGlobalStyle`
83.   *{
84.     padding: 0;
85.     margin: 0;
86.   }
87.   ${MyButton}{
88.     span{
89.       color: rgba(255,255,255,0.6);
90.       font-size: 12px;
91.       line-height: 20px;
92.     }
93.   }
94. `
96. export default function StyleComponentsTest() {
97.   return (
98.     <Wrap>
99.       <GlobalStyle />
100.       <MyButton
101.         bgNormalColor="gray"
102.         bgHighlightColor="white"
103.         normalColor='rgba(255,255,255,0.6)'
104.         hightightColor="red"
105.       >
106.           <p><strong className="emphasize">styled components</strong> 入门</p>
107.           我是只小小鸟
108.       </MyButton>
109.     </Wrap>
110.   )
111. }

复制代码

这个小demo有用到styled-components的关键技术点：

• 其本语法，见Wrap
  
• 动态样式实现，通过$
  
• 怎么写全局样式，见createGlobalStyle
  
• 怎么实现子/孙元素样式控制,见p和strong元素样式控制
  
• 怎么实现伪类，见:hover
  
• 怎么实现伪元素，见::after
  
• 怎么实现动画，见transition/keyframes
  
• 当全局样式和自带样式冲突的，怎么提高样式优先级，见span
  示例代码都做了详细的注释，可以浏览代码了解详情
  

补充

其实通过实现上面示例基本算已经入门styled-components了，但是开发经常要考虑代码复用，那styled-components怎么实现CSS复用，我来优化一下demo
最终实现的效果如下：

关键代码如下：

1. import styled, { keyframes, createGlobalStyle, css } from 'styled-components'
3. // 样式复用
4. const flexColCenter = css`
5.   display: flex;
6.   flex-direction: column;
7.   justify-content: center;
8.   align-items: center;
9. `
10. const textHighlightColor = css`
11.   color: ${props => props.hightightColor ? props.hightightColor : 'white'};
12. `
14. const Wrap = styled.div`
15.   width: 100%;
16.   height: 100vh;
17.   ${flexColCenter}
18.   gap: 20px;
19. `
21. // css帧动画
22. const aniTag = keyframes`
23.   0% {
24.     opacity: 0;
25.     transform: translateY(-100%);
26.   }
27.   100% {
28.     opacity: 1;
29.     transform: translateY(0);
30.   }
31. `
33. const MyButton = styled.div`
34.   width: 400px;
35.   height: 80px;
36.   border:1px solid gray;
37.   border-radius: 10px;
38.   overflow: hidden;
39.   ${flexColCenter}
40.   position: relative;
41.   // 传参
42.   background-color: ${props => props.bgNormalColor ? props.bgNormalColor : 'blue'};
43.   transition: background-color 0.3s ease-in-out;
44.   // 伪元素
45.   &::after{
46.     content: 'after';
47.     height: 20px;
48.     font-size: 14px;
49.     line-height: 20px;
50.     padding:0 5px;
51.     border-radius: 0 0 6px 6px;
52.     position: absolute;
53.     top: 0;
54.     right: 10px;
55.     background-color: yellow;
56.     ${textHighlightColor}
57.     opacity: 0;
58.   }
59.   // 子孙选择器
60.   p {
61.     line-height: 24px;
62.     color: ${props => props.normalColor ? props.normalColor : 'black'};
63.     transition: color 0.3s ease-in-out;
64.   }
65.   // 当有全局样式的时候，使用&&提高局部样式优先级来覆盖全局样式
66.   && span{
67.     color: rgba(255,0,255,0.6);
68.   }
69.   // 类选择器
70.   .emphasize{
71.     text-decoration: underline;
72.   }
73.   // 伪类
74.   &:hover{
75.     background-color: ${props => props.bgHighlightColor ? props.bgHighlightColor : 'yellow'};
76.     p{
77.       ${textHighlightColor}
78.     }
79.     // css animation动画
80.     &::after{
81.       animation: ${aniTag} 0.4s ease-in-out forwards;
82.     }
83.   }
84. `
86. const MyButton1 = styled(MyButton)`
87.   border:4px solid gray;
88.   border-radius: 20px;
89. `
91. // 全局样式
92. const GlobalStyle = createGlobalStyle`
93.   *{
94.     padding: 0;
95.     margin: 0;
96.   }
97.   ${MyButton}{
98.     span{
99.       color: rgba(255,255,255,0.6);
100.       font-size: 12px;
101.       line-height: 20px;
102.     }
103.   }
104. `
106. export default function StyleComponentsTest() {
107.   return (
108.     <Wrap>
109.       <GlobalStyle />
110.       <MyButton
111.         bgNormalColor="gray"
112.         bgHighlightColor="white"
113.         normalColor='rgba(255,255,255,0.6)'
114.         hightightColor="red"
115.       >
116.           <p><strong className="emphasize">styled components</strong> 入门</p>
117.           我是只小小鸟
118.       </MyButton>
119.       <MyButton1
120.         bgNormalColor="gray"
121.         bgHighlightColor="white"
122.         normalColor='rgba(255,255,255,0.6)'
123.         hightightColor="red"
124.       >
125.           <p><strong className="emphasize">styled components</strong> 入门1</p>
126.           我是只小小鸟1
127.       </MyButton1>
128.     </Wrap>
129.   )
130. }

复制代码

关键点：

• 样式复用，见flexColCenter/textHighlightColor
  
• 样式继承重写，见MyButton1
  

本来是想放一个在线测试案例的，找了很久都找到能用的React的playground，如果你想自己跑起示例来也是很简单的，初始化一个最简单的React示例项目并安装styled-components依赖，新建一个组件，把上面代码复制进去即可，推荐直接使用vite初始化项目

1. // 1命令行执行如下命令，再选择react即可
2. npm create vite@latest

复制代码

或者直接clone我的测试仓库，你本地测试即可：demo仓库
小结

个人的知识和能力是有限的，本文只是个人练习styled-components的小demo，应该还有很多styled-components高级用法我没有了解到，如果有不对的地方或者你有更好的建议，希望不吝留言分享，一起学习一起进步

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

鼓励转贴优秀软件安全工具和文档！