基于 styled-components 实现一套皮肤系统
时间:2022-06-06
本文章向大家介绍基于 styled-components 实现一套皮肤系统,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
styled-components 使用模版字符串特性,让我们可以保持原有 CSS 的书写习惯来编写 CSS,同时,利用 ${ props => props.theme.xxx }
的方式,实现皮肤系统中挖空填值的能力。
import styled from "styled-components";
export const Skin = styled.div`
border: 1px solid #000;
border-radius: 3px;
box-shadow: 2px 4px 3px 0px rgba(0, 0, 0, 0.34);
margin: 50px;
padding: 10px 5px;
background-color: ${props => props.theme.a};
.title {
color: #fff;
}
input {
visibility: hidden;
width: 0;
height: 0;
float: left;
}
label {
display: block;
margin: 5px 5px;
border: 1px solid ${props => props.theme.e};
border-radius: 3px;
background-color: ${props => props.theme.b};
&:hover {
background-color: ${props => props.theme.c};
}
&:active {
background-color: ${props => props.theme.d};
}
}
`;
皮肤定义以及换肤实现
有了结构,还需要有对应的一套套皮肤方案,其实皮肤方案就是一套套的取值了。
我在 coolors.co 上面取了两套颜色,对应实现两套皮肤方案
https://coolors.co/247ba0-70c1b3-b2dbbf-f3ffbd-ff1654 https://coolors.co/e63946-f1faee-a8dadc-457b9d-1d3557
export const theme001 = {
a: "#247ba0",
b: "#70c1b3",
c: "#b2dbbf",
d: "#f3ffbd",
e: "#ff1654"
};
export const theme002 = {
a: "#e63946",
b: "#f1faee",
c: "#a8dadc",
d: "#457b9d",
e: "#1d3557"
};
为了快速实现 DEMO 效果,我皮肤的取值命名直接就 abcd 了,实际业务中当然用便于维护的命名。
皮肤的框架装备好了,同时也准备好了两套皮肤,那要怎么实现换肤呢?
import React from "react";
import { render } from "react-dom";
import { ThemeProvider } from "styled-components";
import { Skin, theme001, theme002 } from "./skin.js";
const Instance = function () {
return (
<ThemeProvider theme={theme002}>
<Skin>
<Survey title="小调查2" options={["好", "一般", "不好"]} />
</Skin>
</ThemeProvider>
)
}
通过简单的组合方式,就可以把 theme002
应用到某个界面上面了,是不是很方便
最后,我们来看看效果
- Sedo榜单中,域名“加密世界”CryptoWorld.com七位数夺冠
- ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互
- 2018年热点分享:比特币到底是什么?
- JVM快速入门
- SQL学习之使用常用函数处理数据
- Javascript快速入门(上篇)
- SQL练习之不反复执行相同的计算
- SQL练习之求解填字游戏
- 快速入门系列--WCF--08扩展与新特性
- SQL练习之两个列值的交换
- Parcel,零配置开发 React 应用!
- 像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)
- 正则表达式快速入门
- JavaScript之<script>标签简介
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于Android在布局中动态添加view的两种方法(总结)
- Android向node.js编写的服务器发送数据并接收请求
- Android startActivityForResult和setResult的区别
- Linux系统使用Fuser命令的方法
- Android实现地理定位功能
- Android实现在ServiceManager中加入自定义服务的方法详解
- Android studio so库找不到问题解决办法
- Android使用ViewPager实现屏幕滑动效果
- Android 自定义view实现进度条加载效果实例代码
- Android电池电量监听的示例代码
- Android 解决ScrollView嵌套CridView显示问题
- Android利用zxing快速集成二维码扫描的实例教程
- Android中使用SharedPreferences完成记住账号密码的功能
- Android Intent封装的实例详解
- Android自定义Drawable实现圆角效果