Anpassbare CSS-Eigenschaften mit React und CSS-Modulen erstellen/PostCSS

Ich versuche, eine Bibliothek von reagierenden Komponenten zu erstellen, die außerhalb einer Anwendung sind. Dies wird ein npm-Modul, das mit Webpack geladen wird. Ich style die Komponente mit CSS-Modulen, und ich versuche zu sehen, wie einige seiner Eigenschaften anpassbar machen. Für Instace, Hintergrundfarbe.Anpassbare CSS-Eigenschaften mit React und CSS-Modulen erstellen/PostCSS

Ich möchte CSS-Variablen verwenden, um diese beispielsweise diese Syntax in der CSS-Datei haben:

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

Wo --backgroundColor eine Variable I gesetzt, und rot ist die Standard. Meine Frage ist, gibt es eine Möglichkeit, Variablen an die .css-Datei übergeben, wenn Sie es aus der .jsx-Datei laden? Also könnte ich ein Variablenobjekt an die Komponente übergeben, was dann beeinflussen würde, wie es den Style lädt? Könnte ich PostCSS dafür verwenden?

Danke.

PS: Ich weiß, dass dies durch die Verwendung von Inline-JS-Stilen gelöst werden könnte, aber ich versuche, CSS zuerst eine Chance zu geben.

Quelle

2017-03-02 Pablo Barría Urenda

Sie können Javascript nicht in eine CSS-Datei injizieren, und PostCSS kann nur Ihre CSS-Dateien transformieren, aber Variablen nicht injizieren/ersetzen.

Eine Möglichkeit, dies zu tun, wäre jedoch, .scss (Sass) -Dateien mit Standardvariablen zu erstellen, z. $background-color: red; Sie könnten dann Ihre Module und .scss Dateien in ihre .scss Dateien importieren und beliebige Variablen wie $background-color mit ihren eigenen Variablen überschreiben, wenn sie dies wünschen.

Quelle

2017-03-02 16:59:21

Können Sie mich auf ein Beispiel dafür hinweisen? –

@ PabloBarríaUrenda Bitte überprüfen Sie diesen Beitrag: http://stackoverflow.com/questions/17089717/how-to-overwrite-scss-variables-when-compiling-to-css. Ich habe jedoch kein Arbeitsbeispiel, auf das Sie hinweisen könnten. Sie sollten überprüfen, wie Bootstrap oder andere Frameworks dies tun (sie erlauben es, Variablen zu setzen). –

Ich bin nicht sicher, ob ich verstehe Sie recht, aber hier, was ich denke an:

Wenn Sie .css Datei mit Webpack erfordern fügt es diese CSS als String an das <head> Element der Seite hinter die Szene.

Warum tun Sie nicht, was Webpack mit Ihrer eigenen Funktion tut, so.

Ihr Modul:

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

Verbrauch:

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

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

Und Ihre CSS ist einfach

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

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

Quelle

2017-03-02 20:34:17 disstruct

Ich fand eine Lösung, die dies bereits tut, und nutzt die neueste standardisierte JavaScript verfügt über

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

Es kann nur sein, was ich suchte.

Quelle

2017-03-03 20:36:17

Es kann erreicht werden, indem Sie PostCSS und das postcss-custom-properties Plugin in Ihrer Pipeline hinzufügen. Es hat eine variables Option, die JS definierte Variablen (Eigenschaften) in jede Datei injizieren wird in Bearbeitung.
Dies beseitigt die Notwendigkeit @import alles in jeder CSS-Modul-Datei.

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

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

Sehen Sie, wie es zu benutzen mit babel-plugin-css-modules-transformhttps://github.com/pascalduez/react-module-boilerplate/blob/master/src/theme/index.js und https://github.com/pascalduez/react-module-boilerplate/blob/master/.babelrc#L21 aber das funktioniert auch mit Webpack.

Quelle

2017-03-04 13:35:30

Mein Problem ist (und das kann ein architektonisches Problem an meinem Ende sein) ist, dass diese Komponenten bereits gebaut sind, als ein externes Paket verbraucht werden. Ihr CSS wurde bereits kompiliert, daher funktioniert die Verwendung von benutzerdefinierten Eigenschaften nicht. –

Anpassbare CSS-Eigenschaften mit React und CSS-Modulen erstellen/PostCSS

Antwort

Verwandte Themen