Reactjs 如何使用React Rsuite库创建自定义较少的主题

是否有人使用过Rsuite库（）。我试图创建一个自定义主题，但在遵循他们的指示时遇到了问题。我安装了以下依赖项：自定义cra、less、less loader、react app rewire less和react app rewired。此外，我不确定在何处导入默认和自定义.less文件：

少进口 创建一个单独的.less文件，如下所示，然后介绍此文件

到目前为止，我的config.override.js看起来像：

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
    fixBabelImports("babel-plugin-import", {
        libraryName: 'rsuite',
        libraryDirectory: 'styles',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        importLoaders: true,
    })
);

fixBabelImports对我来说很难，因为我在尝试编译时不断遇到以下错误：

未找到模块：无法解析“/Users/kristenbaldwin/mreb-2/src/components/Navigation”中的“rsuite/style/dropdown”

这是我的导航组件：

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, NavLink } from 'react-router-dom';
import { Sidenav, Toggle, Nav, Dropdown, Icon } from 'rsuite';
import Home from '../Home/Home';
import 'rsuite/styles/less/index.less';
import '../../styles/custom-theme.less';
import './Navigation.less';

const NoMatch = ({ location }) => (
    <div>
        <h3>Page not found: {location.pathname}</h3>
    </div>
);

class Navigation extends Component {
    constructor() {
        super();
        this.state = {
            expanded: true,
            activeKey: '1',
        };
        this.handleToggle = this.handleToggle.bind(this);
        this.handleSelect = this.handleSelect.bind(this);
    }
    handleToggle() {
        this.setState({
            expanded: !this.state.expanded
        });
    }
    handleSelect(eventKey) {
        this.setState({
            activeKey: eventKey
        });
    }
    render() {
        const { expanded } = this.state;
        return (
            <Router>
                <div className="sidenav-wrapper">
                    <Sidenav expanded={expanded} appearance="inverse"
                        activeKey={this.state.activeKey}
                        onSelect={this.handleSelect}>
                        <Sidenav.Body>
                            <Toggle onChange={this.handleToggle} checked={expanded} />
                            <hr />
                            <Nav>
                                <Nav.Item componentClass={NavLink} to="/" eventKey="1" activeClassName="rs-nav-item-active" icon={<Icon icon="dashboard" />}>
                                    Dashboard
                                </Nav.Item>
                                <Nav.Item componentClass={NavLink} to="/agents" eventKey="2" activeClassName="rs-nav-item-active" icon={<Icon icon="group" />}>
                                    Agents
                                </Nav.Item>
                                <Dropdown placement="rightTop" eventKey="3" title="Advanced" icon={<Icon icon="magic" />}>
                                    <Dropdown.Item componentClass={NavLink} to="/geo" eventKey="3-1" activeClassName="rs-dropdown-item-active">Geo</Dropdown.Item>
                                    <Dropdown.Item componentClass={NavLink} to="/devices" eventKey="3-2" activeClassName="rs-dropdown-item-active">Devices</Dropdown.Item>
                                </Dropdown>
                                <Dropdown eventKey="4" title="Settings" icon={<Icon icon="gear-circle" />}>
                                    <Dropdown.Item componentClass={NavLink} to="/applications" eventKey="4-1" activeClassName="rs-dropdown-item-active">Applications</Dropdown.Item>
                                    <Dropdown.Item componentClass={NavLink} to="/channels" eventKey="4-2" activeClassName="rs-dropdown-item-active">Channels</Dropdown.Item>
                                </Dropdown>
                            </Nav>
                        </Sidenav.Body>
                    </Sidenav>
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route component={NoMatch} />
                    </Switch>
                </div>
            </Router>
        );
    }
}

export default Navigation;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，NavLink}；
从'rsuite'导入{Sidenav，Toggle，Nav，Dropdown，Icon}；
从“../Home/Home”导入Home；
导入“rsuite/styles/less/index.less”；
导入“../style/custom-theme.less”；
导入“/Navigation.less”；
常量NoMatch=（{location}）=>(
找不到页面：{location.pathname}
);
类导航扩展了组件{
构造函数（）{
超级（）；
此.state={
对,，
activeKey:'1'，
};
this.handleToggle=this.handleToggle.bind（this）；
this.handleSelect=this.handleSelect.bind（this）；
}
手语{
这是我的国家({
展开：！this.state.expanded
});
}
handleSelect（事件键）{
这是我的国家({
activeKey:eventKey
});
}
render（）{
const{expanded}=this.state；
返回(

仪表板
代理人
地理位置
装置
应用
渠道
);
}
}
导出默认导航；

---

如果有人使用Rsuite制作自定义主题的例子，他们会非常有帮助！谢谢

让库的创建者看一看，更新react应用程序后，你需要安装定制cra，越来越少的加载程序。config-overrides.js应为：

/* config-overrides.js */
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@base-color': '#f44336' }
  })
);

---

让库的创建者看一看，随着react应用程序的重新布线，你需要安装定制cra，越来越少的加载器。config-overrides.js应为：

/* config-overrides.js */
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@base-color': '#f44336' }
  })
);