react----styled-components的使用

styled-components是一款用js來書寫樣式的插件,用這個可以很方便的修改樣式的屬性

使用方法:

           安裝:    npm i styled-components

 

使用方法:

1.首先 創建style.js文件來存放樣式

//引入組件
import styled from "styled-components"

//命名一定要首字母大寫,因爲這個是標籤的名字,標籤類型看styled後面的是什麼標籤的名字
這個引用在需要的頁面中的值要和這個一樣

const Headstyle = styled.div `
    position:fixed;
    width: 100%;
    height: 1.2em;
    line-height: 1.2em;
    padding:0.2em 0;
    text-align: center;

//這裏的背景和top的屬性是動態的,需要改變的,這個值是從使用頁面傳遞過來顯示,利於動態改變這些屬性的使用

    background:${props =>props.Bgcolor};
    top:${props =>props.HeadPosition}em
`
const NoticeCss = styled.span`
    font-size: 0.1em;
    color: ${props =>props.fontColor}
`

//最後一定要記得輸出
export{
    Headstyle,
    NoticeCss
}

在使用的頁面這樣使用

           首先我們需要先引進這個js文件

        import {Headstyle,NoticeCss} from './style'

然後再具體的位置上這樣書寫:

//這個標籤的名字就是剛剛在style.js中定義的名字,Bgcolor是傳遞給樣式JS的值,可以設置爲動態的值,由後臺傳入,也可以自己設置
 
<Headstyle Bgcolor="yellow" HeadPosition="3">
         <NoticeCss fontColor='red'>這是一條公告</NoticeCss>
 </Headstyle>