Question

我一直试图使用react-toolbox覆盖react-toolbox-themr中的color-primary和color-accent变量但我没有成功。我已经整理了一个简单的git repo来演示。

这是我的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向我显示正在正确导入的东西......但我的应用程序没有获得主题。

我试图保持我的主题自定义简单并且接近于他们网站上的示例，但我想出了无格式的组件。任何帮助表示赞赏。

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]（即主题[.css]）并在类名末尾添加了5-char哈希。

这意味着react-toolbox组件正在尝试使用类名rt-appBar-whatever，但我的类名（通过webpack加载器加载后）被命名为theme__rt-appBar-whatever__99Kiw＆lt; - 显然这不是工作

我将配置改为仅使用[local]，一切都按预期工作！

我希望这将有助于将来可能会遇到这个问题的其他人。

react-toolbox 2.0-beta.6 themeprovider无效

1 个答案: