亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js類庫styled-components快速入門教程

 更新時間：2022年06月24日 15:48:13   作者：宇cccc  
這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

styled-components 是什么？

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

相對于其他預處理有什么優(yōu)點？

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

解決了什么問題？

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

官方文檔

https://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 (
            <Wrapper>
                <Title>Hello styled-components</Title>
            </Wrapper>
        )
    }

此時我們可以看到控制臺中輸出了一個隨機的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(
    <div>
        <Button>Normal</Button>
        <Button primary>Primary</Button>
    </div>
);

在組件傳遞的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 (
            <Container imgSrc={imgSrc}>
            </Container>
        )
    }
}
// 在這里是可以拿到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}) => (
    <a className={className}>
        {children}
    </a>
)
const StyledLink = styled(Link)`
    color: palevioletred;
`
render(
    <div>
        <Link>普通組件</Link>
        <StyledLink>有顏色嗎？</StyledLink>
    </div>
);

組件樣式繼承

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

改變組件標簽

在閑的蛋疼的情況下 我們想要改變組件的標簽 比如把 button 變成 a 標簽

// 利用上面定義的 Button 組件 調用 withComponent 方法
const Link = Button.withComponent('a')

維護其他屬性

在某種情況下，我們可能需要用到第三方庫樣式，我們可以使用這個方法輕松達到

const Input = styled.input.attrs({
    // 定義靜態(tài) props
    type: 'password',
    // 沒傳默認使用 1em
    margin: props => props.size || '1em',
    padding: props => props.size || '1em'
})`
    color: palevioletred;
    font-size: 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    // 動態(tài)計算props
    margin: ${props => props.margin};
    padding: ${props => props.padding}
`
render ( <Input size='1em'></Input>  <Input size='2em'></Input> )

動畫

動畫會生成一個隨機類名 而不會污染到全局

import { keyframes } from 'styled-components'
// CSS 動畫
const rotate360 = keyframes`
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
`
const Rotate = Button.extend`
    animation: ${rotate360} 2s linear infinite;
`
render ( <Rotate>  ??  </Rotate> )

結語

styled-components雖然解決了大部分問題，增加了可維護性，但是破壞了原生體驗，時常我們需要寫更多的代碼來達到業(yè)務要求，希望未來有更好的方案，更多關于js類庫styled-components的資料請關注腳本之家其它相關文章！

相關文章

  • Three.js學習之Lamber材質和Phong材質

    Three.js學習之Lamber材質和Phong材質

    本篇將介紹基本材質以及兩種基于光照模型的材質（Lamber與Phong），有需要的小伙伴們可以參考學習。
    2016-08-08
  • 淺談JavaScript前端開發(fā)的MVC結構與MVVM結構

    淺談JavaScript前端開發(fā)的MVC結構與MVVM結構

    以AngularJS為代表的MVVM結構框架或庫這兩年來在前端界真是火到不行,大有對抗傳統jQuery綁定思想的趨勢,這里我們結合傳統的MVC結構,來淺談JavaScript前端開發(fā)的MVC結構與MVVM結構
    2016-06-06
  • 分享5個好用的javascript文件上傳插件

    分享5個好用的javascript文件上傳插件

    本文為大家分享了5個不錯的javascript文件上傳插件，選擇一款功能強大使用簡單的上傳插件將為我們節(jié)省很多開發(fā)時間
    2018-09-09
  • js類庫styled-components快速入門教程

    js類庫styled-components快速入門教程

    這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-06-06
  • Highcharts入門之簡介

    Highcharts入門之簡介

    Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業(yè)用途使用。下面通過本文的介紹及實例一起來學習學習吧。
    2016-08-08
  • Highcharts學習之數據列

    Highcharts學習之數據列

    數據列配置是 Highcharts 最復雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細節(jié)可定制的話，那么數據列配置就是這個重要特性的核心。
    2016-08-08
  • Highcharts入門之基本屬性

    Highcharts入門之基本屬性

    Highcharts是一個用純JavaScript編寫的一個圖表庫，之前小編發(fā)了一篇介紹Highcharts的文章，那么本文將進一步的介紹Highcharts的基本屬性，有需要的可以參考學習。
    2016-08-08
  • 基于d3.js實現實時刷新的折線圖

    基于d3.js實現實時刷新的折線圖

    本文用實例演示如何用d3.js實現實時刷新的折線圖,非常具有實用價值,需要的朋友可以參考下。
    2016-08-08
  • Three.js學習之網格

    Three.js學習之網格

    本篇將先介紹創(chuàng)建較為常用的物體：網格，然后介紹如何修改物體的屬性。下面跟著小編一起來學習學習。
    2016-08-08
  • require.js深入了解 require.js特性介紹

    require.js深入了解 require.js特性介紹

    這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環(huán)依賴、BaseUrl、JSONP等內容,需要的朋友可以參考下
    2014-09-09

最新評論