騒々しいstyled-components快速入門

styled-componentsとは何ですか?

styled-componentsは、一般的なcss in jsクラスライブラリです.同じタイプのクラスライブラリと同様に、変数、ループ、関数など、原生cssが備えていない能力をjs付与することで解決します.

他の前処理に比べてどのような利点がありますか?

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 (
            
                
            
        )
    }

コンソールにランダムな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(
    

        Normal
        Primary
    
);

コンポーネントが渡される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

コンポーネントラベルの変更

暇な卵が痛い場合は、buttonをaラベルに変えるなど、コンポーネントのラベルを変更したいと思っています.

//         Button       withComponent   
const Link = Button.withComponent('a')

その他の属性の維持

場合によっては、サードパーティ製ライブラリスタイルを使用する必要がある場合があります.この方法で簡単に達成できます.

const Input = styled.input.attrs({
    //      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;
    //     props
    margin: ${props => props.margin};
    padding: ${props => props.padding}
`
render (    )

アニメーション(Animation)

アニメーションは、グローバルを汚染することなくランダムなクラス名を生成します.

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 (      )

締めくくり

styled-componentsは大部分の問題を解決し、メンテナンス性を高めたが、オリジナルの体験を破壊し、ビジネスの要求を達成するためにより多くのコードを書く必要があり、将来より良い案があることを望んでいる.