ReactとCSSモジュール/ PostCSSでカスタマイズ可能なCSSプロパティを作成する

私は、アプリケーションの外部にある反応コンポーネントのライブラリを作成しようとしています。これはWebpackがロードされたnpmモジュールになります。私はCSSモジュールを使ってコンポーネントをスタイリングしています。そのプロパティのいくつかをカスタマイズ可能にする方法を見ていきたいと思います。インスタントの場合、背景色。ReactとCSSモジュール/ PostCSSでカスタマイズ可能なCSSプロパティを作成する

私はCSSファイルでインスタンスのために、この構文を持っているこのため、CSS変数を使用したいと思います：

--backgroundColorは私が設定できる変数であり、赤がある

.myClass { 
    backgrond-color: var(--backgroundColor, red); 
}

デフォルト。私の質問は、.jsxファイルからロードするときに.cssファイルに変数を渡す方法があるかどうかです。だから私はコンポーネントに変数オブジェクトを渡すことができます。コンポーネントはそれがスタイルをどのようにロードするかに影響しますか？これにPostCSSを使用できますか？

ありがとうございました。

PS：これはインラインJSスタイルを使用して解決できることは分かっていますが、私はCSSを最初に打ち込もうとしています。

出典

2017-03-02 Pablo Barría Urenda

あなたはCSSファイルにjavascriptを挿入することはできません。PostCSSはあなたのcssファイルのみを変換できますが、変数の挿入/置換はできません。

しかし、これを行う1つの方法は、デフォルト変数を持つ.scss（sass）ファイルを作成することです。 $background-color: red;モジュールと.scssファイルを.scssファイルにインポートして、$background-colorのような変数を自分の変数に上書きすることができます。

出典

2017-03-02 16:59:21

この例を教えてください。 –

@PabloBarríaUrendaこの投稿を確認してください：http://stackoverflow.com/questions/17089717/how-to-overwrite-scss-variables-when-compiling-to-cssしかし、私はあなたにポイントするための実用的な例はありません。ブートストラップや他のフレームワークがこれをやっているかどうかをチェックしてください（変数を設定することができます）。 –

私は右のあなたを理解わからないんだけど、ここで私はと思っています何を：あなたはWebPACKので.cssファイルを必要としているとき、それは背後にあるページの<head>要素に文字列として、このCSSを追加

シーン。

Webpackがあなた自身の関数を使って何をしているのでしょうか？

あなたのモジュール：

import $ from 'jquery'; 
 

 
/* this function builds string like this: 
 
    :root { 
 
     --bg: green; 
 
     --fontSize: 25px; 
 
    } 
 

 
    from the options object like this: 
 
    { 
 
     bg: 'green', 
 
     fontSize: '25px' 
 
    } 
 
*/ 
 
function buildCssString(options) { 
 
    let str = ':root {\n' 
 
    
 
    for(let key in options) { 
 
     str += '\t--' + key + ': ' + options[key] + ';\n' 
 
    } 
 

 
    str += '}'; 
 

 
    return str; 
 
} 
 

 
/* this function adds css string to head element */ 
 
export const configureCssVariables = function(options) { 
 
    $(function() { 
 
     var $head = $('head'), 
 
      $style = $('<style></style>'); 
 

 
     $style.text(buildCssString(options)); 
 
     $style.appendTo($head) 
 
    }); 
 
}

使用法：

import {configureCssVariables} from './your-module'; 
 

 
configureCssVariables({ 
 
    bg: 'green', 
 
    fontSize: '25px' 
 
});

そして、あなたのCSSは簡単です

/* default variables that will be overwritten 
 
    by calling configureCssVariables() 
 
*/ 
 
:root { 
 
    --bg: yellow; 
 
    --fontSize: 16px; 
 
} 
 

 
.myClass { 
 
    backgrond-color: var(--bg); 
 
    font-size: var(--fontSize); 
 
}

出典

2017-03-02 20:34:17 disstruct

私は実際にはすでにそれはちょうど私が探していたものかもしれ

https://github.com/styled-components/styled-components

ていますこれを行い、最新の標準化されたJavaScriptを利用して解決策を見つけました。

出典

2017-03-03 20:36:17

PostCSSとpostcss-custom-propertiesプラグインをパイプラインに追加することで達成できます。処理中のファイルにJS定義の変数（プロパティ）を挿入するオプションがvariablesです。
これにより、すべてのCSSモジュールファイル内に何かがある必要がなくなります。@import

const theme = { 
    'color-primary': 'green', 
    'color-secondary': 'blue', 
    'color-danger': 'red', 
    'color-gray': '#ccc', 
}; 

require('postcss-custom-properties')({ 
    variables: theme, 
});

babel-plugin-css-modules-transformhttps://github.com/pascalduez/react-module-boilerplate/blob/master/src/theme/index.jsとhttps://github.com/pascalduez/react-module-boilerplate/blob/master/.babelrc#L21でそれを使用する方法を参照してください。それは、同様のWebPACKで動作します。

出典

2017-03-04 13:35:30

私の問題は（これは私の最終的なアーキテクチャ上の問題かもしれませんが）これらはすでにビルドされており、外部パッケージとして消費されているということです。彼らのCSSは既にコンパイルされているので、カスタムプロパティを使用することはできません。 –

ReactとCSSモジュール/ PostCSSでカスタマイズ可能なCSSプロパティを作成する

答えて

関連する問題