时间戳

首页 > 解决方案 > 没有为 antd 菜单选项加载 CSS

reactjs - 没有为 antd 菜单选项加载 CSS

问题描述

在与 next.js 框架做出反应时，我使用 antd npm packge 来控制表格、菜单等控件。但是 css 没有为控件加载。我做错了什么..

 import React, { Component } from 'react';
 import { Menu, Icon } from 'antd';
 import '../Header/header.css';
 class HeaderComponent extends Component {
     render() {
         return (
             <div className="navbar">
                 <div className="col-1">
                     <img src="../../static/logo.png" ></img>
                 </div>
                 <div className="col-2">
                     <Menu mode="horizontal">
                         <Menu.Item key="app-user">App Users</Menu.Item>
                         <Menu.Item key="non-app-user">Non App Users</Menu.Item>
                     </Menu>
                 </div>
             </div>        );
     }
 }

编辑：css header.css

 .navbar {
     width: 100%;

 }

 .header {
     display: flex;
     flex-direction: column;
 }

这是我的 next.config.js

 if (typeof require !== 'undefined') {
     require.extensions['.less'] = file => {};

   }

   const withLess = require('@zeit/next-less'),
      nextConfig = {
       //target: 'serverless',
       env: {
         weatherApi: '',
         mapBoxApi: ''
       },
       onDemandEntries: {
         maxInactiveAge: 1000 * 60 * 60,
         pagesBufferLength: 5
       },
       lessLoaderOptions: {
         javascriptEnabled: true
       },
       webpack: config => config
     };

   module.exports = withLess(nextConfig);

我想我必须在 nextconfig.js.generates 这个错误中进行配置

错误：您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件

标签： reactjsnext.jsantd

解决方案

您需要在主 css 文件中导入 css，例如 app.css

应用程序.css：

@import '~antd/dist/antd.css';

.App {
  some css...;
}

...

然后在你的父组件中导入 app.css：

import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
import './app.css';
 class HeaderComponent extends Component {
     render() {
         return (
             <div className="navbar">
                 <div className="col-1">
                     <img src="../../static/logo.png" ></img>
                 </div>
                 <div className="col-2">
                     <Menu mode="horizontal">
                         <Menu.Item key="app-user">App Users</Menu.Item>
                         <Menu.Item key="non-app-user">Non App Users</Menu.Item>
                     </Menu>
                 </div>
             </div>        );
     }
 }

或导入import "antd/dist/antd.css"而不是包含在单独的 css 文件中。

推荐阅读