Electron-React 实战(三) --- element-react

Element-react 介绍

Element-react 是饿了么团队开发出的一套前端UI库，它里面的基础组件相当丰富，几乎能满足前端开发的需求，能让我们快速开发出一个精美的网页。

官网链接：Element-react

安装

#首先安装框架包
yarn add element-react --save

#再安装主题包
yarn add element-theme-default --save

使用

在Home.tsx文件中，做出如下修改

import React from 'react';
import { Link } from 'react-router-dom';
import routes from '../constants/routes.json';
import styles from './Home.css';

import { Button } from 'element-react';
import 'element-theme-default';


export default function Home() {
  return (
    <div className={styles.container} data-tid="container">
      <h2>Home</h2>
      <Button type="primary">我是一个没有感情的按钮</Button>
      <br/>
      <Link to={routes.COUNTER}>to Counter</Link>
    </div>
  );
}

这是完全按照官网上的步骤完成的，应该是大功告成了，但是，出现了下图的样子：

按钮是渲染出来了，但是没有样式，看看开发者工具

发现其他生效的class和button的class有点区别，生效的class被加上了前缀和后缀，这应该是webpack中编译css，把文件中的类名等选择器加上了前缀和后缀

找到webpack.config.renderer.dev.babel.js,options中的modules注释掉。

{
        test: /^((?!\.global).)*\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              // modules: {
              //   localIdentName: '[name]__[local]__[hash:base64:5]'
              // },
              sourceMap: true,
              importLoaders: 1
            }
          }
        ]
      }

保存后，在执行

yarn dev

element-react的button样式能够正常显示了。

结语

到这里，我们已经把element-react UI库正确地导入到我们的项目中了，准备工作都做好了，接下来就正式开始我们的构建我们的项目了，let's go ....

噢，对了，是不是发现修改了webpack文件，项目原先存在的样式好像失效了。。。