react-toolbox 2.0-beta.6主题提供程序不工作

Question

我一直在尝试使用react-toolbox-themr覆盖react-toolbox中的color-primary和color-accent变量，但没有成功。我已经整理了一个简单的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和react devtools向我展示了正确导入的内容……但是我的应用程序没有得到主题。

我试着让我的主题定制简单并接近my网站上的示例，但我想出了一些未设置样式的组件。任何帮助都是非常感谢的。

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]'部件混淆了我定义的类名，使其包含文件的[name] (即.theme.css)，并将5个字符的散列添加到类名的末尾。

这意味着react工具箱组件试图使用类名rt-appBar-whatever，但我的类名(通过webpack加载器加载后)被命名为theme__rt-appBar-whatever__99Kiw <--显然这是不起作用的。

我更改了配置，只使用[local]，一切都像预期的那样工作！

我希望这对将来遇到这个问题的其他人有所帮助。