styled components草根中文版文档
2024-10-19 03:29:39
1.styled components官网网址
以组件的形式来写样式。
1.1安装
yarn add styled-components
1.2
写法依托于ES6和webpack。
2.Getting Started万物皆组件
把样式定义在组件中
import styled from 'styled-components'
const Title = styled.h1` //h1是标签名,就是<h1></h1>
font-size: 1.5em;
text-align: center;
color: palevioletred;
`
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`
export {
Title,
Wrapper
}
在正式文件中引入把样式定义成组件的文件。
import {Wrapper,Title} from ’......‘
class App extends Component{
render(){
<Wrapper>
<Title>hello<Title>
</Wrapper>
}
}
3.Adapting based on props适配属性
给标签传递属性,在样式组件中去接这个属性。
import styled from 'styled-components'
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: ${props => props.color}; //在组件内部写一个箭头函数来接收参数。通过props获得父组件传过来的参数
background: ${props => props.primary ? "palevioletred" : "white"};
`
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`
export {
Title,
Wrapper
}
在正式文件中引入把样式定义成组件的文件。
import {Wrapper,Title} from ’......‘
class App extends Component{
render(){
<Wrapper>
<Title color=‘red’ primary>hello<Title> //写一个属性,往样式组件中传参。
</Wrapper>
}
}
4.Extending Styles扩展样式
用途:1.继承样式,在原有的样式基础上做一些更新。
2.定义好一组样式,想把这组样式应用到另外一组样式上去。
import styled from 'styled-components'
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`
const TomatoButton = styled(Button)` //此组件继承上一个组件样式,并增加新的样式
color: tomato;
border-color: tomato;
`
export {
Button,
TomatoButton
}
在正式文件中引入把样式定义成组件的文件。
import {Button,TomatoButton} from ’......‘
class App extends Component{
render(){
<div>
<Button as="a">按钮</Button> //as的用处是我们可以定义好一个样式组件,用as换成另外一个标签,如这个就换成了a标签。
<TomatoButton>按钮</TomatoButton>
</div>
}
}
5.Styling any components样式化很多组件
import React from 'react'
import styled from 'styled-components'
const Link = (props) => ( //普通组件,不是样式组件
<div>
<a className={props.className}> //必须写,需要用它接收一下增强的样式。
{props.children} //children可以拿到插槽里的内容
</a>
<a>
{props.children}
</a>
</div>
)
const StyledLink = styled(Link)` //给Link定义样式,给本来没有样式的组件加上样式
color: palevioletred;
font-weight: bold;
`
export {
Link,
StyledLink
}
在正式文件中引入把样式定义成组件的文件。
import {Link,StyledLink} from ’......‘
class App extends Component{
render(){
<div>
<StyledLink>hello</StyledLink>
</div>
}
}
6.Passed props传递属性、默认属性
import styled from 'styled-components'
const Input = styled('input')`
padding: 0.5em;
margin: 0.5em;
color: ${ props => props.inputColor };
background: papayawhip;
border: none;
border-radius: 3px;
`
export {
Input
}
在正式文件中引入把样式定义成组件的文件。
import {Input} from ’......‘
class App extends Component{
constructor(){
super()
this.state ={
value:"aaa"
}
}
render(){
<div>
<Input defaultValue={this.state.value}></Input> //给input框设置一个默认值。自定义一个属性,会继承下去,很重要哦!
<Input inputColor="rebeccapurple"></Input>
</div>
}
}
7.Coming from CSS直接引css
import React from 'react'
import styles from './styles.css'
export default class Counter extends React.Component {
state = { count: 0 }
increment = () => this.setState({ count: this.state.count + 1 })
decrement = () => this.setState({ count: this.state.count - 1 })
render() {
return (
<div className={styles.counter}>
<p className={styles.paragraph}>{this.state.count}</p>
<button className={styles.button} onClick={this.increment}>
+
</button>
<button className={styles.button} onClick={this.decrement}>
-
</button>
</div>
)
}}
8.Attaching additional props链接额外组件在props上
import styled from 'styled-components'
const StyledDiv = styled.div.attrs({ //给标签加自己的属性,但不能是自定义属性。
title: 'aaa',
id: 'bbb',
'data-src': (props) => props.hello //可以进行欲添加。
})`
font-size: 100px;
> span {
font-size: 50px;
}
& > span {
font-size: 25px;
}
`
export {
StyledDiv
}
在正式文件中引入把样式定义成组件的文件。
import {StyledDiv} from ’......‘
class App extends Component{
render(){
return(
<StyleDiv hello="hi'>
hello
<span>hahah</span>
</StyleDiv>
)
}
最新文章
- 《CLR.via.C#第三版》第二部分第6,7章节读书笔记(三)
- P2P核心业务体系
- imcs初探
- 烂泥:学习mysql的binlog配置
- BAE3.0上的java+tomcat+hibernate代码发布
- phpcms 01
- int组成时间值
- Ubuntu下屏幕录像、后期处理不完全攻略
- Swift - 动态添加删除TableView的单元格(以及内部元件)
- Synchronize执行过程
- 一大波 Android 刘海屏来袭,全网最全适配技巧!
- Html5 监听拦截Android返回键方法详解
- nodejs--(一)http模板篇
- 【Javaweb】poi实现通过上传excel表格批量导入数据到数据库
- Java多线程(二)关于多线程的CPU密集型和IO密集型这件事
- TestNg 9. 参数化测试-DataProvider参数化
- 解决 kubenetes无法创建pod No API token found for service account ";default";
- IDEA运行tomcat8.5.35源代码
- gcc/g++基本命令简介
- Mysql 性能优化2 系统参数配置方法 和 文件系统
热门文章
- dotnet core使用开源组件FastHttpApi进行web应用开发
- Asp.Net SignalR Hub中的上下文对象
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->;用户管理模块新增“重置用户密码”功能
- git第三节----git status与git diff
- Tomcat常用的过滤器
- 第9章 使用客户端凭据保护API - Identity Server 4 中文文档(v1.0.0)
- (摘)老司机也必须掌握的MySQL优化指南
- HAProxy负载均衡技术
- 如何优雅的使用 Python 实现文件递归遍历
- Java开发笔记(七十一)容器工具Collections