Question

任何人都使用过Rsuite库（https://rsuitejs.com/en/guide/themes）。我正在尝试创建自定义主题，但在按照他们的指示进行操作时遇到了麻烦。我安装了以下依赖项：custom-cra，更少，更少加载器，react-app-rewire-less和react-app-rewired。另外，我不确定在哪里导入默认和自定义.less文件：

减少导入如下创建一个单独的.less文件，然后介绍该文件。

@import '~rsuite/styles/less/index.less'; //The default style file.
@import 'custom-theme.less'; // Style customization.

到目前为止，我的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 / styles / 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;

如果有任何人使用Rsuite并制作自定义主题的示例，那么他们将非常有帮助！谢谢！

Answer 1

让该库的创建者看一看，并通过对react-app-rewired的更新，您需要安装custom-cra，越来越少的装载程序。 config-overrides.js应该是：

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

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

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

1 个答案: