时间戳

首页 > 解决方案 > 不同页面主页上图标处理程序的颜色

reactjs - 不同页面主页上图标处理程序的颜色

问题描述

请帮忙。我需要将主页上的图标处理程序的颜色设置为白色，并在网站的其他页面上保持现在的黑暗状态。在https://github.com/react-component/drawer上。如果我更改 css 文件中的颜色，所有页面上的颜色都相同。但在我的网站上，第一页是深色的，其他页面是浅色的。因此，在主页上，打开菜单的项目是不可见的。其余部分通常可见。 https://codesandbox.io/s/9z3zrz3814

标签： reactjscolorsmenuiconshandler

解决方案

在 github 上的文档中，我看到组件抽屉接受一个道具“prefixCls”，您可以在其中根据道具管理不同的类，而不是依赖单个 css 类。

/* eslint-disable no-console,react/no-multi-comp */
import Drawer from 'rc-drawer';
import React from 'react';
import ReactDom from 'react-dom';
import { Menu, Icon } from 'antd';


const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

ReactDom.render((
  <div>
    <Drawer width="20vw" prefixCls={myCondition ? myClass : myOtherClass}>
      <Menu
        style={{ height: '200%' }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={<span><Icon type="mail" /><span>Navigation One</span></span>}
        >
          <MenuItemGroup key="g1" title="Item 1">
            <Menu.Item key="1">Option 1</Menu.Item>
            <Menu.Item key="2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup key="g2" title="Item 2">
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}
        >
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu
          key="sub4"
          title={<span><Icon type="setting" /><span>Navigation Three</span></span>}
        >
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    </Drawer>
    <div
      style={{
        width: '100%', height: 667, background: '#fff000',
        color: '#fff', textAlign: 'center', lineHeight: '667px',
      }}
    >
      内容区块
    </div>
  </div>), document.getElementById('__react-content'));

推荐阅读