資訊專欄INFORMATION COLUMN
摘要：廢話不多話，來上車安裝或者簡述使用創(chuàng)建全局的樣式首先創(chuàng)建一個文件，例如引全局包里面為項目需要的內(nèi)容在組件內(nèi)把引入的當(dāng)做標(biāo)簽寫入創(chuàng)建一個局部的樣式引局部包里面為項目需要的內(nèi)容在組件內(nèi)把引入的當(dāng)做標(biāo)簽寫入類嵌套類似于用法大同小異列舉
廢話不多話，來上車！
安裝：
npm install --save styled-components （或者 yarn add styled-components）
簡述使用:
1、 創(chuàng)建全局的樣式：
首先創(chuàng)建一個JS文件，例如style.js
①：import { createGlobalStyle } from "styled-components" // 引全局包
②：export const GlobalStyle = createGlobalStylemargin:0// ``里面為項目需要的css內(nèi)容
③：在react組件內(nèi) 把引入的 GlobalStyle 當(dāng)做標(biāo)簽寫入
class App extends Component {
render() {
return (
創(chuàng)建一個局部的樣式
①：import styled from "styled-components"; // 引局部包
②：export const HeaderWrapper = styled.div //里面為項目需要的css內(nèi)容
③：在react組件內(nèi) 把引入的 HeaderWrapper 當(dāng)做標(biāo)簽寫入
class App extends Component {
render() {
return (
3、類嵌套：（類似于less sass用法大同小異）
列舉個項目實例：
export const SearchWrapper = styled.div`
position:relative;
float:left;
.iconfont{
position:absolute;
}`;
4、增加屬性寫法：
舉例給A標(biāo)簽增加attrs屬性:
export const Logo = styled.a.attrs({
href:"/"
})`
5、 設(shè)置當(dāng)前元素內(nèi)指定的class類
&.left{
float:left;
}
&::placeholder{
color:#999;
}
6、 styled-components 傳值寫法：
樣式內(nèi)js文件用props去接收
export const RecommendItem = styled.div`
background: url(${(props) => props.imgUrl});
`;
react組件內(nèi)給樣式JS文件傳入需要的地址
7、常見小坑：
引圖片不要直接寫行內(nèi)樣式，默認(rèn)會轉(zhuǎn)化為字符串，導(dǎo)致加載圖片失敗，可用如下方式：
import logoPic from "../../statics/logo.png";
export const Logo = styled.a`
background:url(${logoPic});
`;
整理不易，喜歡的話就順手點個贊吧，您的贊會是我們繼續(xù)分享的動力 ！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101141.html
摘要：指定啟用例如上述代碼，就使用和處理了除了以外的。設(shè)置當(dāng)前的為，同樣這個配置也可以寫在中。設(shè)置目錄刪除注釋去除空格去除屬性引號復(fù)制靜態(tài)目錄將所以可能被請求的靜態(tài)文件，分別放在目錄下。結(jié)語本次從零到一，新建了一個腳手架。 react-sample-javascript 為了實現(xiàn)一個可定制化高的react工程，我們往往會自己搭建一個react工程。所以本文會從零開始搭建一個react腳手架工...
摘要：回顧上一節(jié)我們完成了游戲核心場景的大部分工作，能操控主角，能隨機(jī)掉落蘋果了。于是我們修改之前的方法，也就是接到蘋果后的方法。接到炸彈后結(jié)束和蘋果掉地上的調(diào)用方式是一樣的。 showImg(https://segmentfault.com/img/bVNawu?w=900&h=500); 回顧 上一節(jié)我們完成了游戲核心場景play的大部分工作，能操控主角，能隨機(jī)掉落蘋果了。那么這一節(jié)我們...
閱讀 3474·2023-04-25 18:52
閱讀 2486·2021-11-22 15:31
閱讀 1225·2021-10-22 09:54
閱讀 3014·2021-09-29 09:42
閱讀 608·2021-09-26 09:55
閱讀 914·2021-09-13 10:28
閱讀 1106·2019-08-30 15:56
閱讀 2111·2019-08-30 15:55
