styled-components 使用方法

时间：2021-08-13 17:24:33 阅读：18 评论：0 收藏：0 [点我收藏+]

技术分享图片

yarn add styled-components

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

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 (

<TitleWapper>我是home标题</TitleWapper>

</div>

</HomeWrapper>

)

}

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

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>

<h2 >我是Profile标题</h2>

<ul >

</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 (

<hr />

</ThemeProvider>

)

}

styled-components 使用方法

原文：https://www.cnblogs.com/eric-share/p/15137447.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)