styled-components 使用方法

styled-components 使用方法

 

 

yarn add styled-components

------------

1

import  styled from ‘styled-components‘

export const HomeWrapper = styled.div `
    font-size:20px;
    color:red;
    .banner{
        background:#999;
        span{
            color: #fff;
            &.active{
                color: orange;
            }

            &:hover{
                color:green;
            }

            &::after{
                content: ‘aa‘;
            }
        } 
    }
`
export const TitleWapper = styled.h2 `
     text-decoration:underline;
     font-size:25px;
`
 
import React, { PureComponent } from ‘react‘ 

import {
    HomeWrapper,
    TitleWapper
} from ‘./style‘

export default class Home extends PureComponent {
    render() {
        return (
            <HomeWrapper>
                <TitleWapper>我是home标题</TitleWapper>
                <div className="banner">
                    <span>轮播图1</span>
                    <span className="active">轮播图2</span>
                    <span>轮播图3</span>
                    <span>轮播图4</span>
                </div>
            </HomeWrapper>
        )
    }
}
-------------------
2  
import React, { PureComponent } from ‘react‘ 

import  styled from ‘styled-components‘

/**
 *  1 props 穿透
 *  2 attrs 的使用
 *  3 传入state 作为 props 属性
*/
export const HyInput = styled.input.attrs({
    placeholder:"Eric",
    bColor:"red"
}) `
    background-color: lightblue;
    border-color: ${props => props.bColor};
    /* 动态获取样式 */
    color: ${props => props.color};
`

export default class Profile extends PureComponent {

    constructor(props){
        super(props);
        this.state = {
            color:"gold"
        }
    }

    render() {
        return ( 
            <div>
                <HyInput type="text" color = {this.state.color} />
                <h2 >我是Profile标题</h2>
                <ul >
                    <li>设置列表1</li> 
                    <li>设置列表2</li> 
                    <li>设置列表3</li> 
                </ul>
            </div>
        )
    }
}
 
-------------------------
 
import React, { PureComponent } from ‘react‘ 
import Home from ‘../home‘ 
import Profile from ‘../profile‘ 

import  styled,{ThemeProvider} from ‘styled-components‘

const HYButton = styled.button`
    padding: 10px 20px ;
    color: #fff;
`
const HYp = styled.p`
    color: ${props => props.theme.themeColor};
    font-size: ${props => props.theme.fontSize};
`
// 样式继承
const HYPrimaryButton = styled(HYButton)`
    background-color: #5082ff; 
`

export default class App extends PureComponent {
    render() {
        return (
            <ThemeProvider theme={{themeColor:"skyblue",fontSize:"30px"}}> 
                <Home />
                <hr />
                <Profile />
                <HYp className="themeTitle">主题设置</HYp>

                <HYButton> 普通按钮 </HYButton>
                <HYPrimaryButton> 主要按钮 </HYPrimaryButton>
            </ThemeProvider>
        )
    }
}
  

 

styled-components 使用方法

上一篇:循环结构之for循环 数据类型的内置方法 字符编码 文件操作


下一篇:存储过程