react项目的ant-design-mobile的使用
现在测试一下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的使用的更多相关文章
- React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
- react 编写 基于ant.design 页面的参考笔记
前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...
- React组件库Ant Design的安装与使用
一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...
- 【零售App】—— react/ant design mobile项目爬坑
一.H5制作 - 图片文本的动画效果 bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变:若先调节动画时间和延迟时间在选定动画效果,则动 ...
- react项目的react-router-dom路由的使用
现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...
- ant Design和ant Design mobile的使用,并实现按需加载
1.全局安装yarn npm install -g create-react-app yarn 2.创建react项目,并用yarn start 运行 3.引入antd/引入antd-mobile y ...
- Ant Design Mobile 使用 rc-form
引入: import { createForm } from 'rc-form'; 步骤一:绑定 form // 将form表单的api绑定到props,便于调用 const EditHeaderWr ...
- 十九、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 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
随机推荐
- POJ1821 Fence
题意 Language:Default Fence Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6478 Accepted: ...
- 使用vue自定义简单的消息提示框
<style scoped> /** 弹窗动画*/ a { text-decoration: none } .drop-enter-active { /* 动画进入过程:0.5s */ t ...
- 使用fpm 方便快速生成postgresql extension分发包
fpm 是一个不错,而且强大的rpm.deb,系统启动服务工具包,我们可以用来快速的生成专业的软件分发包 演示一个pg 扩展包分发包的生成(rpm 以及deb) 安装fpm sudo gem inst ...
- Jquery 样式选择器,查找包含两种样式以上的元素
可以连写 $(".样式一.样式二") 中间不要留空格,id也一样. $(".modalDishMsgTitleWrap").find(".standa ...
- Python完全新手教程
转发:作者: taowen 来源: 博客园 发布时间: 2010-10-01 00:42 阅读: 1618 次 推荐: 0 原文链接 [收藏] Lesson ...
- 【python】Numpy中stack(),hstack(),vstack()函数详解
转自 https://blog.csdn.net/csdn15698845876/article/details/73380803 这三个函数有些相似性,都是堆叠数组,里面最难理解的应该就是stack ...
- 初识TypeScript
环境配置 1,全局安装node和npm 2,安装TypeScript包 npm install typescript -g tsc --version 编写第一个ts程序 1,初始化项目 新建文件夹d ...
- day2模块初识别
sys_mod.py import sys print(sys.argv) #['C:/Users/Administrator/desktop/s17/day2/sys_mod.py'] 打印脚本的绝 ...
- 并发之lock的condition接口
13.死磕Java并发-----J.U.C之Condition 12.Condition使用总结 11.Java并发编程系列之十七:Condition接口 === 13.死磕Java并发-----J. ...
- SqlServer常用内置函数
--======================================= -- SQL常用内置函数 --======================================= --判 ...