无法主题 react-toolbox navDrawer 组件答案

【问题标题】：Can't theme react-toolbox navDrawer component无法主题 react-toolbox navDrawer 组件
【发布时间】：2016-10-31 14:38:24
【问题描述】：

我正在尝试更改 NavDrawer 组件的背景颜色，但我现在花了大约 2 个小时尝试所有可能的类组合，但无济于事。我需要设置内部.drawerContent div 的样式，而不是.navDrawer div

首先我有：

//theme.scss
.drawerContent {
  background-color: blue
}

// TestTheme.js
import React from 'react';
import { Layout, NavDrawer, Panel } from 'react-toolbox';
import theme from './theme.scss';

const TestTheme = () => (
  <Layout>
    <NavDrawer
      theme={theme}
    >
      Some Content Here
    </NavDrawer>
    <Panel></Panel>
  </Layout>
);

export default TestTheme;

然后，在this question和issue #688的引导下，我尝试了：

//theme.scss
.root.navDrawer {
  .drawerContent {
    background-color: blue
  }
}

// TestTheme.js
import React from 'react';
import { Layout, NavDrawer, Panel } from 'react-toolbox';
import theme from './theme.scss';

const TestTheme = () => (
  <Layout>
    <NavDrawer
      className={theme.root}
      theme={theme}
    >
      Some Content Here
    </NavDrawer>
    <Panel></Panel>
  </Layout>
);

export default TestTheme;

在这两种情况下，抽屉内容都没有发生任何变化，尽管我可以看到在第二种情况下，.navDrawer 确实应用了.root 类。

为了清楚起见，这不是似乎是应用 css 属性的问题，但不优先。我正在查看开发工具中的类，而.drawerContent div 的唯一类是默认主题。看起来我的主题的类名甚至没有被附加。

谁能帮忙？

【问题讨论】：

标签： reactjs sass

【解决方案1】：

我遇到了同样的问题，一位贡献者将我重定向到这个issue（所有感谢他们）

您必须将主题更改为

.layout {
  .navDrawer {
    .drawerContent {
      background-color: blue;
    }
  }
}

并将其应用于Layout 组件

<Layout theme={theme}>
    <NavDrawer>
      Some Content Here
    </NavDrawer>
    <Panel></Panel>
  </Layout>

【讨论】：