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

【问题标题】：react-toolbox 2.0-beta.6 themeprovider not workingreact-toolbox 2.0-beta.6 主题提供程序不工作
【发布时间】：2017-02-06 19:53:00
【问题描述】：

我一直在尝试使用react-toolbox-themr 覆盖react-toolbox 中的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 向我显示正在正确导入东西......但我的应用程序没有获得主题。

我试图让我的主题定制简单并接近 themr 网站上的示例，但我想出了无样式的组件。任何帮助表示赞赏。

here is my repo

【问题讨论】：

标签： javascript reactjs typescript webpack postcss

【解决方案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 字符哈希。

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

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

我希望这将帮助其他可能在未来偶然发现此问题的人。

【讨论】：