前端素材 設計元素 界面設計 網頁素材 網站模板 按鈕素材 名片素材 字體設計 圖標設計 生活百科

騷里騷氣的styled-components快速入門

前端素材 技術02-千編萬碼 2月前  次瀏覽

styled-components 是什么?

  • styled-components 是一個常用的 css in js 類庫。和所有同類型的類庫一樣,通過 js 賦能解決了原生 css 所不具備的能力,比如變量、循環、函數等。

相對于其他預處理有什么優點?

  • 諸如 sass&less 等預處理可以解決部分 css 的局限性,但還是要學習新的語法,而且需要對其編譯,其復雜的 webpack 配置也總是讓開發者抵觸。
  • 如果有過sass&less的經驗,也能很快的切換到styled-components,因為大部分語法都類似,比如嵌套,& 繼承等, styled-componens 很好的解決了學習成本與開發環境問題,很適合 React 技術棧 && React Native 的項目開發。

解決了什么問題?

  • className 的寫法會讓原本寫css的寫法十分難以接受
  • 如果通過導入css的方式 會導致變量泄露成為全局 需要配置webpack讓其模塊化
  • 以及上面提到的解決了原生 css 所不具備的能力,能夠加速項目的快速開發

官方文檔

https://www.styled-components.com/docs


安裝

npm install --save styled-components

編輯器智能提示

2018-06-11更新

  • webstorm需要安裝 styled-component 插件
  • vscode已支持智能提示

使用

最基礎的使用

import styled from 'styled-components'

const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;
// 相當于  const Title = styled.h1(xx)
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;
    render () {
        return (
            
                Hello styled-components
            
        )
    }

此時我們可以看到控制臺中輸出了一個隨機的className,這是styled-components幫我們完成的. 注意: 組件名要以大些開頭 不然會被解析成普通標簽

傳遞props

const Button = styled.button`
    background: ${props => props.primary ? 'palevioletred' : 'white'};
    color: ${props => props.primary ? 'white' : 'palevioletred'};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`
render(
    
);

在組件傳遞的props都可以在定義組件時獲取到,這樣就很容易實現定制某些風格組件

props高級用法

設置默認值,在未設定必須傳值的情況下我們會給一個默認值(defaultProps)

export default class ALbum extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            // 接收傳遞的值
            imgSrc: props.imgSrc
        }
    }
    
    render () {
        const {imgSrc} = this.state
        return (
            
            
        )
    }
}

// 在這里是可以拿到props的 
const Container = styled.div`
    background-size: cover;
    background-image: url(${props =>  props.imgSrc});
    width: 100%;    
    height: 300px;
`

// 當然沒傳值也沒關系  我們設置默認值
Container.defaultProps = {
    imgSrc: Cover
}

塑造組件

這個非常有用 你可能會遇到一些原本就已經是組件了 但是你要為他添加一些樣式,這時候該怎么辦呢 ?

// 傳遞className 在react-native 中要使用 style
const Link = ({className , children}) => (
    
        {children}
    
)

const StyledLink = styled(Link)`
    color: palevioletred;
`
render(
    
普通組件 有顏色嗎?
);

組件樣式繼承

const Button = styled.button`
    color: palevioletred;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`;
const TomatoButton = Button.extend`
    color: tomato;
    border-color: tomato;
`;
// TomatoButton 部分樣式繼承自 Button 這種情況下不會生成兩個class


相關鏈接

發表評論

2017怎样手机上赚钱