React中styled-components的使用
一、官網(wǎng)地址
https://www.styled-components.com/
二、styled-components
1、styled-components 樣式化組件，主要作用是它可以編寫實(shí)際的CSS代碼來設(shè)計(jì)組件樣式，也不需要組件和樣式之間的映射，即創(chuàng)建后就是一個正常的React 組件，
并且可以附加樣式給當(dāng)前組件。 優(yōu)化react組件
2、在一個組件內(nèi)會將結(jié)構(gòu)、樣式和邏輯寫在一起，雖然這違背了關(guān)注點(diǎn)分離的原則，但是這有利于組件間的隔離。為了順應(yīng)組件化的潮流
3、使用styled-components不需要再使用className屬性來控制樣式，而是將樣式寫成更具語義化的組件的形式
4、使用style-components會隨機(jī)生成一個class名稱，這樣不會污染到全局變量，當(dāng)然因?yàn)殡S機(jī)生成，維護(hù)會增加難度
三、基本使用
1、安裝
cnpm i styled-components -S || yarn add styled-components
2、引入
import styled from "styled-components";
3、使用
export const Header = styled.div`
width:100%;
height:1rem;
background:red
`
import {Header} from "./style/index";
class App extends Component{
render(){
return (
<Header/>
)
}
}四、全局默認(rèn)樣式引入
引入新的API createGlobalStyle ，在下面創(chuàng)建一個 GlobalStyle 變量，用 createGlobalStyle 方法把全局樣式包裹在其中
import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, c{ border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol ,li{ list-style:none; }
body { color:#333; font:12px BASE "SimSun","宋體","Arial Narrow",HELVETICA; background:#fff;}
a { color:#666; text-decoration:none; }
*{box-sizing:border-box}
body,html,#root{
height: 100%;
overflow: hidden;
}//將 <GlobalStyle /> 組件放在 render() 中最外層元素下面
import React, { Component ,Fragment} from 'react';
import {GlobalStyle} from "./reset";
class App extends Component {
render() {
return (
<Fragment>
<GlobalStyle/>
</Fragment>
);
}
}
export default App;五、傳參
如果我們需要動態(tài)改變元素的樣式，則可以通過傳遞參數(shù)的方式進(jìn)行改變
import {Header} from "style/index.js"
render(){
return (
<Header bgColor="red"/>
)
}style/index.js
import styled from "styled-components"; export const Header = styled.div` width:100px; height:200px; props.bgColor}
六、繼承
如果我們需要繼承樣式的時候我們可以通過 styled(繼承的組件名稱)``
const button = styled.button` border:0; width:100px; height:40px; text-align:center; color:#000; ` export const StyledButton = styled(button)` color:#fff; `
七、修改組件內(nèi)部標(biāo)簽
在調(diào)用組件的時候我們可以通過as來修改組件 as="元素名稱"
render(){
return (
<Header as="p"/>
)
} Header組件內(nèi)部渲染的時候就是用的p標(biāo)簽
八、定義組件屬性
export const Input = styled.input.attrs({
value:(props)=>props.value,
name:"input"
})`
border:0;
width:100px;
height:100px;
`九、背景圖片引入
import logo from "./imgs/logo.png";
export const BgLogo = styled.div`
width:100px;
height:200px;
background:url(${logo}) no-repate;
`十、塑造組件
有一種情況，一些原本就已經(jīng)是組件，需要給這些組件添加樣式，這時需要用到塑造組件
import React from "react";
import styled from "styled-components";
const Link = ({className,children})=>(
<a className={className}>
{children}
</a>
)
export StyleLink = styled(Link)`
color:red
`十一、動畫```javascript
const move = keyframes`
0%{
transform:rotate(0%);
}
100%{
transform :rotate(100%);
}
`
export const TransFormDiv = styled.div`
width:100px;
height:100px;
background:red;
animation:${move} 2s;
`十二、當(dāng)標(biāo)簽過多時需要劃分太多組件，我們可以通過以下寫法來簡化組件的編寫
&代表父級
export const StyledUl = styled.ul`
border:1px solid #ccc;
>li{
border-bottom:1px solid #green;
line-height:30px;
padding-left:20px;
&>p{
color:red
}
} 到此這篇關(guān)于React中styled-components的使用的文章就介紹到這了,更多相關(guān)React styled-components內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
30分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
本篇文章主要介紹了React Native 截屏組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12![React報(bào)錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent](http://img.jbzj.com/images/xgimg/bcimg2.png)
React報(bào)錯Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報(bào)錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于react中hook及使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext
這篇文章主要介紹了react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext,其實(shí)與vue中的ref和reactive一樣，通過useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時交互，而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了React Hooks之useRef獲取元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
react-native使用react-navigation進(jìn)行頁面跳轉(zhuǎn)導(dǎo)航的示例
本篇文章主要介紹了react-native使用react-navigation進(jìn)行頁面跳轉(zhuǎn)導(dǎo)航的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
useReducer?createContext代替Redux原理示例解析
這篇文章主要為大家介紹了useReducer?createContext代替Redux原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11