response-toolbox 2.0-beta.6 themeprovider не работает

Question

Я пытался переопределить color-primary и color-accent vars в react-toolbox с помощью react-toolbox-themr, но я не увенчался успехом. Я собрал простой демон git для демонстрации.

вот мои react-toolbox-themr.config.json

{ 
    "customProperties": { 
    "color-primary": "rgb(219,0,0)", 
    "color-primary-dark": "rgb(203,0,0)", 
    "color-accent": "rgb(64,153,255)", 
    "color-accent-dark": "rgb(3,155,229)" 
    }, 
    "output": "src/client/stylesheets/react-toolbox" 
} 

файлы строить хорошо, console.log и реагировать DevTools показывает мне, что вещи импортируются правильно ... но мое приложение не получает тему.

Я старался, чтобы моя настройка темы была простой и близкой к примеру на сайте themr, но я придумываю неэкранированные компоненты. любая помощь приветствуется.

here is my repo

Answer 1

я наконец понял это, и это было (на самом деле не удивляйтесь ...) вопрос WebPack конфигурации.

здесь коммит, который сделал разницу: https://github.com/rkstar/react-toolbox-dashboard/commit/cfcfbd72ce666b1724622fe015b3818fc55c688c?diff=split#diff-1e71174b321bf83364a4a4509f482f9c

, что это сводилось к было то, что я использовал этот конфиг (частично), чтобы иметь дело с CSS файлов:

{ 
     test: /\.css$/, 
     include: [/node_modules/, dir.src], 
     use: [{ 
     loader: 'style-loader' 
     },{ 
     loader: 'css-loader', 
     options: { 
      modules: true, 
      sourceMap: true, 
      importLoaders: 1, 
      localIdentName: '[name]__[local]__[hash:base64:5]' 
      } 
... 
} 

'[name]__[local]__[hash:base64:5]' часть была obfuscating мои определенные имена классов, чтобы включить [name] файла (т. е. theme [.css]) и добавить хэш 5-char в конце имен классов.

что это имел в виде реакции-инструментарий компоненты пытаются использовать имя класса rt-appBar-whatever, но мои имена классов (после того, как загруженные через WebPack загрузчик) были имя theme__rt-appBar-whatever__99Kiw < - очевидно, что это не работает.

Я изменил конфигурацию, чтобы использовать [local] исключительно и все работает как ожидалось!

Я надеюсь, что это поможет кому-то еще, кто может наткнуться на этот вопрос в будущем.