现在测试一下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. SQL Server 幻读 的真实案例

    数据库中有表[01_SubjectiveScoreInfo],要实现表中的数据只被查出一次,此表数据量较大,有三四百万数据.表结构也确实不是很合理,无法修改表结构,即使是新增一个字段也会有相当大的修改 ...

  2. (拼接SQL语句)mysql中date类型,datetime类型

    : , . _ - /  %  &  # @ ! * | [ ] { }   ;  + = update ky set date = '18,9-2'  where id  = 1  // 2 ...

  3. redis使用get key中文变成十六进制编码

    redis-cli 后面加上 --raw 解决中文显示问题 redis-cli -h 127.0.0.1 -p 端口 -a 密码  --raw 不带 --raw 参数: redis-cli -h &g ...

  4. 邮件报警以及服务端能否ping通客户端的小例子(三)

           就这个小小的东西,弄了一天,弄的头晕眼花,毕竟第一次弄这个,记录下来,若干年之后,回看这些笔记,不知是什么样的感想,哈哈.我学一个东西的时候喜欢系统的来,一点一点的来,做这个的时候想法很 ...

  5. 黄聪:OTP动态密码_Java代码实现

    OTP认知 动态口令(OTP,One-Time Password)又称一次性密码,是使用密码技术实现的在客户端和服务器之间通过共享秘密的一种认证技术,是一种强认证技术,是增强目前静态口令认证的一种非常 ...

  6. 前端-JavaScript1-2——JavaScript建立认知

    关于首篇的“ Hello world ! ”这事儿吧,挺有意思,就是学习任何的语言,我们都喜欢在屏幕上直接输出一点什么,当做最简单.最基本的案例.输出什么大家随意,但是很多人都习惯输出“hello w ...

  7. 二叉树遍历(flist)(已知中序和按层遍历,求先序 )

    问题 F: 二叉树遍历(flist) 时间限制: 1 Sec  内存限制: 128 MB提交: 11  解决: 9[提交][状态][讨论版][命题人:quanxing][Edit] [TestData ...

  8. MySQL之Haproxy+Keepalived+MySQL高可用均衡负载部署 (网络摘抄)

    来源于:https://blog.csdn.net/weisong530624687/article/details/71536837?utm_source=blogxgwz3 一.安装主从MySQL ...

  9. Python教程:进击机器学习(五)--Scipy《转》

    Scipy简介 文件输入和输出scipyio 线性代数操作scipylinalg 快速傅里叶变换scipyfftpack 优化器scipyoptimize 统计工具scipystats Scipy简介 ...

  10. 概念吓死人的webservice

    前倾提要:这是我七拼八凑,自己用手打出来的头一篇了!都是别人的想法,我抄袭的,我坦白,我这只是总结一下觉得有用的 本来题目想叫(1)REST API 和WebService(2)REST 样式和 SO ...