Question

我试图更改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的唯一类是默认主题。看起来我的主题的类名甚至没有附加。

任何人都可以帮忙吗？

Answer 1

我遇到了同样的问题而且贡献者将我重定向到issue（所有信用额度）

您必须将主题更改为

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

并将其应用于Layout组件

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

无法解决主题react-toolbox navDrawer组件

1 个答案: