リアクションを持つCSSアーキテクチャーもテーマにすることができます

Question

私は現在大きなリアクションアプリを構築しています。 Cssは、私の強みではありませんでした。しかし、現在CSSにはReassでsass/cssNext/inlineスタイルがあります。私は盛り付けでBEMを使用してきましたが、他のアプリケーションも巨大化しているので、それが崩壊し始めます。特に、元のカラースキーム以外のページを "再スキン"または "テーマ"する能力を持っていたとき。

so - 誰かが私に反応を持つCSSを作成する実証済みの方法を教えてもらえますか？規模が非常によく、人々が自分のコンポーネントを借りたいと思っているときに、気に入ったテーマにすることができます。たとえば、

<MyComponent /> 
// this component has its styles but lets say Joe Schmoe wants be import 
// it? But, Joe wants to overlay his custom styles? 
// Is there a new paradigm that allows for an overlay or reskin within the component? 

さらに、アプリケーション全体が何らかの理由でスキン可能であるという考えですら、私はこれが非常に基本的な質問であることは知っていますが、私がプロジェクトを構築するときはいつも私の苦痛の点もCSSのようです - 本当に効果的なことを知りたいのです。

Answer 1

これは、最近までReactの世界で解決された問題ではありませんでした。

私はリアクタコンポーネントライブラリElementalUIのメンテナーの一人で、過去6〜12ヶ月間さまざまなスタイルを試してきました。 （！）名前をつけて、試しました。 （私はReactNL keynoteの中で最も人気のある図書館の経験について話しましたが、どこが故障したか）

問題は、現在のスタイリングライブラリには、ほとんどの場合、非常にハッキーで、ユーザーフレンドリーではありませんが、コンポーネントを配布するときにはそうではありません。

---

だから私たちはstyled-componentsを作りました。 styled-componentsには興味深いプロパティがあり、その1つはテーマがライブラリに直接組み込まれているため、配布可能なコンポーネントを構築するのに最適です。

ここでは簡単な説明ですが、すべてを説明しているdocumentationをお試しください。

これはstyled-componentsの基本的な使い方は次のようになります。

import React from 'react'; 
import styled from 'styled-components'; 

// Create a <Wrapper> react component that renders a <section> with 
// some padding and a papayawhip background 
const Wrapper = styled.section` 
    padding: 4em; 
    background: papayawhip; 
`; 

この変数、Wrapper、今あなたがレンダリングできるコンポーネントに反応さ：

// Use them like any other React component – except they're styled! 
<Wrapper> 
    <Title>Hello World, this is my first styled component!</Title> 
</Wrapper> 

（もしライブプレイグラウンドを取得する画像をクリックしてください）

タグ付きテンプレートリテラルに補間関数を渡すと、コンポーネントに渡されたプロパティが渡されます。これは、あなたが小道具に適応できることを意味します。ここでは

import styled from 'styled-components'; 

const Button = styled.button` 
    /* Adapt the colors based on primary prop */ 
    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; 
`; 

、私たちは、あなたが他の同じようprimaryを作ることができButtonコンポーネントを反応させるの作成したコンポーネント：

<Button>Normal</Button> 
<Button primary>Primary</Button> 

今すぐ来ますテーマの側面。今

import { ThemeProvider } from 'styled-components'; 

const theme = { 
    main: 'mediumseagreen', 
}; 

ReactDOM.render(
    <ThemeProvider theme={theme}> 
    <MyApp /> 
    </ThemeProvider>, 
    myElem 
); 

そのThemeProvider内の任意のスタイルのコンポーネント、コンテキストにどんなに深く感謝、以下となります。私たちは中にあなたがthemeを渡し、アプリ（またはアプリの一部）をラップすることができますThemeProviderと呼ばれるコンポーネントをエクスポートこのthemeを小道具に注入する。

これはthemable Buttonは次のようになります。

import styled from 'styled-components'; 

const Button = styled.button` 
    /* Color the background and border with theme.main */ 
    background: ${props => props.theme.main}; 
    border: 2px solid ${props => props.theme.main}; 

    /* …more styles here… */ 
`; 

今、あなたのButtonは、それが渡さthemeを取ると、それはそれに基づいたスタイリングです変更されます！ （defaultPropsでデフォルトを提供することもできます）

これは、styled-componentsの要点で、配布可能なコンポーネントの構築にどのように役立ちますか？

現在WIP doc about writing third-party component librariesがあります。私がチェックアウトすることをお勧めします。もちろん、通常のドキュメントも参考にしてください。私たちはすべての拠点をカバーしようとしました。あなたが嫌い​​なものを見た場合、またはあなたが不足していると思われる場合はすぐにお知らせください。

styled-componentsについて他に質問がある場合は、ここに返信するか、Twitterにお問い合わせください。 （@mxstbr）

Answer 2

私は何が最善の方法であるかわかりません。私はそれがもっと個人的な好みだと思う。私が使用しているツールを共有するだけです。私が使用しているのはcss-modulesとpostcssです。

css-modulesを使用すると、CSSクラスごとにグローバルな一意の名前を持つローカルスコープの識別子を作成し、モジュール化して再利用可能なCSSを有効にすることができます！ postcss-modules-valuesを使用して、すべての設定変数を含むグローバル設定ファイルを作成することもできます。あなたのウェブサイトのテーマを変更できるように

コンポーネントの構造は次のとおりです。私の各コンポーネントには、維持管理や変更が容易な1つのCSSファイルがあります。

ここでButtonコンポーネントのコードです。

function Button(props) { 
    const className = props.className ? `${styles.button} ${props.className}` : styles.button; 

    return (
    <button disabled={props.disabled} className={`${className}`} type="button" onClick={props.onClick}> 
     {Children.toArray(props.children)} 
    </button> 
); 
} 

他のコンポーネントがボタンコンポーネントのクラスで渡すことができるコンポーネントのclassNameがあります。そのため、あなたのコンポーネントを借りるときに、ボタンスタイルを拡張またはオーバーライドすることができます。

カスタマイズ可能なウェブサイトを作成する必要がある場合は、カスタマイズしたウェブサイトのライブプレビューを提供するLess.jsを使用することもおすすめします。