现在测试一下ant-design-mobile的使用,引用一个Button

没有样式

这个问题是没有引入样式

解决方法有两种

这种方法自己弄不出来,然后用另外一种方法

引入样式:

import 'antd-mobile/dist/antd-mobile.css';

然后就解决了。

另外补充点东西,根据ant-design-mobile文档的说明,项目的入口页面还需要配置点东西,预防出现的bug

<!DOCTYPE html>
<html>
<head>
<!-- set `maximum-scale` for some compatibility issues -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body></body>
</html>

react项目的ant-design-mobile的使用的更多相关文章

  1. React实战之Ant Design—Upload上传_附件上传

    React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...

  2. react 编写 基于ant.design 页面的参考笔记

    前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...

  3. React组件库Ant Design的安装与使用

    一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...

  4. 【零售App】—— react/ant design mobile项目爬坑

    一.H5制作 - 图片文本的动画效果 bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变:若先调节动画时间和延迟时间在选定动画效果,则动 ...

  5. react项目的react-router-dom路由的使用

    现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...

  6. ant Design和ant Design mobile的使用,并实现按需加载

    1.全局安装yarn npm install -g create-react-app yarn 2.创建react项目,并用yarn start 运行 3.引入antd/引入antd-mobile y ...

  7. Ant Design Mobile 使用 rc-form

    引入: import { createForm } from 'rc-form'; 步骤一:绑定 form // 将form表单的api绑定到props,便于调用 const EditHeaderWr ...

  8. 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

    一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...

  9. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

随机推荐

  1. windows添加永久静态路由

    添加路由最好在命令行管理员模式下操作 添加临时路由命令,重启后失效 route add 172.16.1.0 mask 255.255.255.0 10.0.10.19 其中,172.16.1.0 是 ...

  2. Day 08 文件操作模式,文件复制,游标

    with open:将文件的释放交给with管理 with open('文件', '模式', encoding='utf-8') as f:    # 操作    pass​ a模式:追加写入 # t ...

  3. 请确保 ASP.NET State Service (ASP.NET 状态服务)已启动 问题解决

    当iis部署的网站访问遇到如下错误时: 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同.如 ...

  4. 解决python3.5无法导入cv2.so的问题

    问题描述: 在python3.5环境中导入cv2报错,在python2.7中正常.注:命令行的前缀RL_2018HW是python3.5的环境. (RL_2018HW) gordon@gordon-: ...

  5. PHP 获取数组是几维数组

    // 判断数组是几维数组$data = array(); // 是你要判断的数组$al = array(0);function aL($data,&$al,$level=0){ if(is_a ...

  6. Sqluldr2 libclntsh.so报错处理

    Sqluldr2 libclntsh.so报错处理 处理报错 [oracle@oracledg tmp]$ ./sqluldr2linux64.bin ./sqluldr2linux64.bin: e ...

  7. ubuntu crontab python 定时任务备记

    crontab -e 写入: # at a.m every week with: # * * tar -zcf /var/backups/home.tgz /home/ # # For more in ...

  8. Python(算法)-时间复杂度和空间复杂度

    时间复杂度 算法的时间复杂度是一个函数,它定量描述了该算法的运行时间,时间复杂度常用“O”表述,使用这种方式时,时间复杂度可被称为是渐近的,它考察当输入值大小趋近无穷时的情况 时间复杂度是用来估计算法 ...

  9. @method_decorator() 源码解析

    # coding:utf-8 """ 作用: 原理:闭包 >> 1. 函数内部定义函数 2.内部函数使用外部函数的变量 3.外部函数返回内部函数的引用 带参数 ...

  10. 杰克.多西 twitter创始人 必做清单和不必做清单

    必做清单 活在当下 接受脆弱(Be vulnerable) 只喝柠檬水和红酒 每天 6 组下蹲和俯卧撑 每天跑步 3 英里 每天思考本清单 站直了 打拳击沙袋 10 分钟 跟所有人打招呼 每天 7 小 ...