React17 styled-components

周大胖子 · 发表于 2022-6-14 17:24:17

import React from "react";
import Styled from "styled-components";
const mtyi = '星火相传';
const mtyi2 = '地大物博';
// 利用 styled-components 进行CSS in js 的操作
// 1.安装 npm install --save styled-components
// 2. 引入
// 3.利用 styled创建组件并且引入建议安装插件，要不然编辑器显示的是字符串格式
// props 的用法
const SDiv = Styled.div `
p{
font-size:40px;
color:red;
}
a{
font-size:30px;
color: ${props=>props.color};
}
`;
// attrs 元素原有属性的用法，这里有个返回值问题attrs执行后的返回值仍然是函数，所以后面可以继续调用模板函数
const SInp = Styled.input.attrs({
type:'password',
placeholder: '夸作者真帅'
}) `
background:#eee;
height:32px;
line-height:32px;
`;
// 继承的写法 [就是几个div 样式重复省的麻烦搞个继承]
const BossDiv = Styled.div`
font-size:20px;
background-color:red;
`;
const Diva = Styled(BossDiv)`color:green;`;
const Divb = Styled(BossDiv)`color:#eee;`;
// 知识点之：样式数据的互通，主要用于主题样式切换
// 1. 引入 import {ThemeProvider} from 'styled-components';
// 2. 搞个标签，把不同的模块放进去并在标签中用theme 传递所需样式 <ThemeProvider theme={{color:red}} > <A1></A1> <B1></B1> </ThemeProvider>
// 3. 在子组件中接收 ${props=>props.theme.color}
class TemJs extends React.Component{
constructor(){
super();
this.state={
num:123 ,
aColor:'#a20ddf'
}
this.tmp();
}
render(){
return (
<section>
<p> 补充一个ES6的语法 </p>
{/* 这个概念等于向子组件传值可以在css-in-js 的模板语法中用 ${props=>props.color}; */}
<SDiv color ={this.state.aColor} >
我真帅
<p>大力</p>
</SDiv>
<SInp></SInp>
<Diva>aDiv</Diva>
<Divb>bDiv</Divb>
</section>
);
}
tmp(){
console.log(`常规ES6字符串拼接语法${mtyi}我爱我家`)
// 下方这个方法表明 es6 拼接完的模板字符串是可执行函数，打印出来的是一个数组：结果是字符串的非替代字段拆分，组成的数组
// 在ES6中可以使用模板字符串调用函数
this.a `常规ES6字符串拼接语法${mtyi}我爱我家${mtyi2}的，人生在世弄扁舟`;
this.b('你','我','他');
this.b `常规ES6字符串拼接语法${mtyi}我爱我家${mtyi2}的，人生在世弄扁舟`;
}
tmp2(){
// 解析
}
a(arr){
console.log(arr)
}
b(...brr){
console.log(brr) // 解析结果为多个元素的数组，第一个元素非替代字段拆分成的数组，第二个元素开始后面都是替代字段各为一个元素
}
}
export default TemJs;

复制代码