如何自定义mui控件样式

html-css022

如何自定义mui控件样式,第1张

操作步骤如下:

1、通过chrome浏览器模拟手机浏览器打开对应页面,初级用户参考这里这里

2、在需要重定义样式的控件(导航栏)上,点击右键,选择“审查元素”,会打开chrome控制台,控制台左侧会显示对应控件的DOM结构,右侧会显示作用在该控件上的CSS定义;在左侧DOM区,切换DOM节点,上方模拟器对应控件及右侧作用的CSS定义均会变化;

3、分析需要重定义的内容,从效果图上直观来看,需要将导航条背景色修改为蓝色,然后将返回图标及导航标题修改为白色;

4、通过DOM结构分析,应该较容易的看出,header节点表示导航条控件,那我们就DOM区选择header节点,然后分析右侧模拟器,会看到header上的所有css定义,找到background-color定义

5、单击background-color对应颜色值,修改成UED设计师提供的蓝色,比如#253ff2,这时上方模拟器上导航条会实时变成蓝色

6、确认颜色值正确后,将修改代码复制到对应页面中,本示例为titlebar.html,保存如下代码(需放在mui.min.css引用之后),这样就可以覆盖mui默认的背景色定义:.mui-bar{

background-color:

#253FF2

}

7、此时再刷新当前页面,就会看到背景色已变;

8、同样的方式,找到标题栏文字颜色定义,找文字颜色时要定位到对应文字的最小节点,对于如下的DOM节点,

导航栏

我们应该优先看h1的css定义,会发现color定义为#000,修改为#fff即可

同样复制保存css定义,如下:.mui-title{

color:#fff

}

9、最后,还剩一个左侧返回箭头的颜色值,我们也以同样的方法修改,左侧DOM区选中

节点,然后在右侧css区查看css定义,找到color颜色定义的地方,然后同样修改为#fff,

10、以同样方式拷贝css代码到html文件,最终复写的css代码为

.mui-bar{

background-color:

#253FF2

}

.mui-title{

color:#fff

}

a{

color:#fff

}

经过如上几个步骤,我们就完成了导航条的自定义,当然在实际开发中,我们可以更为灵活,比如

的css定义牵扯范围太广,我们仅在返回的a节点上增加style属性,在style中定义color,例如:

导航栏

CSS Modules 不是官方规范或浏览器中的实现,而是构建步骤中的一个过程(在 Webpack 或 Browserify 的帮助下),它改变了类名和选择器的作用域(即有点像命名空间)。

目的: 解决 CSS 中全局作用域的问题

在 React 中默认开启了 CSS Module,样式表文件需要以 xxx.module.sass/less/css 命名

我们也可以通过配置 webpack 来开启 CSS Module

webpack.config.js

localIdentName 可以定义生产的哈希类名,默认是 [hash:base64]

详细配置见: css-loader

localIdentName 选项的占位符有:

默认 CSS 的规则是全局生效的,任何一个组件下的 CSS 样式,都会影响其他组件中使用相同类名的地方。

style.css

App.js

Header.css

Header.js

index.js

此时我们的页面上展示的就是绿色的 Header 组件 和 Hello World

因为定义了两个相同的 title class,虽然是在不同的组件中导入,但是他们的类名是一样的,最终都会在全局作用域下生效,因为这两个组件都渲染在了页面上。

至于为什么会显示成绿色,因为 Header 组件是后导入的,所以 Header 的 title 样式就覆盖了 App 的 title 样式,这就是 CSS 层叠样式的概念了,此处不再赘述。(如果导入顺序换一下,那么就是红色了)

答案: 产生局部作用域的唯一方法,就是使用一个独一无二的 class 的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。

这里就拿 React 项目来进行解释

在 React 中,默认是开启 CSS Module 的。但是对于样式表文件的命名一个约束。需要以 .module.less/css/sass 结尾

随意我们就可以这样改造一下 Header 组件,来使用 CSS Module 的功能。

效果: Header 组件 展示为绿色; Hello World 展示为红色。可以看到 Header 中相同类名的样式并没有影响到我们的 App 组件

此时在控制台中查看 HTML,发现我们 Header 组件中的 h2 标签上的 class 类名变成了 <h2class="_src_Header_module__title">Header 组件</h2>

同理在样式表文件中也变成了

App 组件

随机的 className 是可以配置的:通过 webpack.config.js 中配置 css-loader 的 localIdentName 选项来定义生成的随机类名

通常在我们的日常开发中有这种场景:

我们有一个自己的组件,但是这个组件使用了一些第三方的组件库,对于我们使用的第三方组件我们又想修改一下它的样式。

如果此时,我们直接在当前组件的样式文件中,通过定义一个和第三方组件相同类名的类(比如说 antd button 的 antdr-btn 类),然后写自己的样式:

Button.module.css

然后我在组件中导入

Button.js

此时我们会发现我们的修改并没有生效,为什么呢?原因就是最后我们导入的类名会被 css-loader 处理成一个随机的值,所以导致不再是 antdr-btn 。

那么我们如何实现在自定义组件中修改第三方组件的样式呢?

需要不对第三方组件的类名进行哈希,保留原始类名,才能起到样式覆盖的作用 :global

:global(.className)那么此时这个 className 即使是在组件的样式表中定义的也不会被添加 hash 值,所以就可以影响全局所有类名为 className 的样式

注意:

此时组件中对该类的样式修改会影响全局所有使用该类名的地方,所以为了将样式修改限制到本组件,一般推荐将:global 使用在组件自定义类名范围下,然后添加这个自定义类名到组件中

CSS Modules 还提供一种显式的局部作用域语法:local(.className),等同于.className(直接在样式文件中写.className)该类名在编译后会被添加 hash 值

在 CSS Modules 中,一个选择器可以继承另一个选择器的规则,这称为"组合"。

在 Header.module.css 中,让.title 继承.back 。

Header.module.css

Header.js

编译后

CSS

HTML

选择器也可以继承其他 CSS 文件里面的规则。

other.module.css

Header.module.css

注意:

导入的类名需要和被导入文件中的类名相同

编译之后的效果和 composes 同一个文件中的 class 效果相同

ios上plus是一直存在的,不涉及等ready事件。但安卓上还是需要等plus ready。

在安卓环境中,通常情况下需要html页面解析完成后才会让5+ API生效,安卓的执行的顺序为:

1. 加载html页面,loading

2. 解析html页面(解析title节点、下载script/link等节点引用的资源,如js/css文件)

3. 触发DOMContentLoaded事件

4. 触发plusready事件

此文对执行顺序有详细描述:http://ask.dcloud.net.cn/article/571

我们总是在不停追求性能优化,生效时间越早,我们可以把app的体验做的更好。

在HBuilder7.5版本之后安卓版支持提前注入5+ API,可以在plusready事件触发之前调用5+ API,操作方法是在页面中添加以下节点:

<script src="html5plus://ready"></script>,示例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<title>HTML5+ API</title>

<script src="html5plus://ready"></script>

<script type="text/javascript" charset="utf-8">

// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断

if(window.plus){

// 在这里调用5+ API

}else{// 兼容老版本的plusready事件

document.addEventListener('plusready',function () {

// 在这里调用5+ API

},false)

}

</script>

</head>

<body>

Hello HTML5 plus