2018-05-20 13:48:54 qq_39736103 阅读数 532
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1972 人正在学习 去看看 梁富城

React的内联样式

     1.页面效果

    


 2.实现代码

     


使用link关联到对应的css文件

 

React的内联样式的表达式

   1.页面效果


2.实现代码

  

React的CSS模块化

    1.前提

         安装babel-plugins-react-html-attrs,stylee-loader,css-loader

    2.代码


Css模块化的优点

   1.所有样式都是local,解决了命名冲突和全局污染问题

   2.class名称生成规则配置灵活,可以来压缩class名

   3.只需引用组件的js就能搞定组件所有的js和css

   4.依然是css,几乎零学习成本

React使用ant-design

   1.页面效果

  

2.代码

 



2017-06-21 15:36:35 u014328357 阅读数 2784
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1972 人正在学习 去看看 梁富城

基本样式设置

可以通过直接设置className prop来确定类名以确定样式,或者通过style prop来设置行内样式。 需要注意的是,style prop需要是一个对象。

栗子:

const style = {
    color: 'white',
    backgroundImage: `url(${imgUrl})`,
    //注意如下写法,会自动转换为-webkit-transition 
    WebkitTransition: 'all',
    // ms是唯一小写的浏览器前缀
    msTransition: 'all',
};
const component = <Component style={style} />;

样式中的像素值

当设置width和height时,可以不必添加px单位,React会自动添加:

// 渲染为height: 10px
const style = { height: 10 };
ReactDOM.render(<Component style={style}>Hello</Component>, mountNode);

使用classnames库

代码对比:
未使用:

class Button extends Component {
    // ...
    render() {
        let btnClass = 'btn';
        if (this.state.isPressed) { 
            btnClass += ' btn-pressed'; 
        } else if (this.state.isHovered) { 
            btnClass += ' btn-over'; 
        }
        return <button className={btnClass}>{this.props.label}</button>; 
    }
};

使用:

import classNames from 'classnames';
class Button extends Component { 
    // ...
    render() {
        const btnClass = classNames({
            'btn': true,
            'btn-pressed': this.state.isPressed,
            'btn-over': !this.state.isPressed && this.state.isHovered,
        });
        return <button className={btnClass}>{this.props.label}</button>; 
    }
});

CSS Modules

CSS Modules依旧使用CSS,但是使用JS来管理样式依赖。

使用CSS可能遇到的问题:

1、全局污染
2、命名混乱
3、依赖管理不彻底
4、JS与CSS无法共享变量
5、代码压缩不彻底

结合webpack的css-loader,就可以在CSS中定义样式,在JS文件中导入。

栗子:
css文件:

/* components/Button.css */
.normal { /* normal相关样式*/ } 
.disabled { /* disabled相关样式*/ }

js文件:

/* components/Button.js */
import styles from './Button.css';
console.log(styles);
// =>
// Object {
// normal: 'button--normal-abc5436',
// disabled: 'button--disabled-def884', 
// }
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

最终生成的html:

<button class="button--normal-abc5436"> Processing... </button>

类名button–normal-abc5436是css按照localIdentName自动生成的class名称。经过这样的混淆处理后,class的名称基本就是唯一的。

CSS Modules对css中的class名都做了处理,使用对象来保存原class和混淆后的class的对应关系。

使用composes来组合样式

对于样式服用,CSSModules只提供了唯一的方式来处理:composes组合。

/* components/Button.css */ 
.base { /*通用样式*/ }

.normal { 
    composes: base;
    /* normal类的其他样式 */
}
import styles from './Button.css';
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的HTML:

<button class="button--base-abc53 button--normal-abc53"> Processing... </button>

class命名技巧

样式名可以分为三个级别:
1、block: 对应模块名
2、element:对应模块中的节点名
3、modifier:对应节点的相关状态

栗子:dialog__confirm-button--highlight

一个结合React的栗子:

/* dialog.css */
.root {}
.confirm {} 
.disabledConfirm {}
/* dialog.js */
import React, { Component } from 'react'; 
import classNames from 'classnames'; 
import styles from './dialog.css';
class Dialog extends Component {
    render() {
        const cx = classNames({
            confirm: !this.state.disabled, 
            disabledConfirm: this.state.disabled,
        });
        return (
            <div className={styles.root}>
                <a className={styles[cx]}>Confirm</a>
                ... 
            </div>
        ); 
    }
}
2017-12-25 17:28:56 web_longboss 阅读数 623
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1972 人正在学习 去看看 梁富城

react条件样式
这里写图片描述

2019-01-22 13:40:44 zsm4623 阅读数 1678
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1972 人正在学习 去看看 梁富城

1. 使用行内样式

注意点: 使用于所有的组件样式,react中规定,写行内样式时,要写在{{}}中,使用驼峰命名发

<div style={{color: 'red', fontSize: 12}}>这是行内样式</div>

2. 使用外联式样式

  • 配置对应的 loader 规则
  1. 使用 .css 样式:
    • 运行 npm i style-loader css-loader -D 命令安装 loader;
    • webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
      
  2. 使用 .less 样式:
    • 运行 npm i style-loader css-loader less-loader less -D 命令安装 loader;
    • webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
      
  3. 使用 .scss 样式:
    • 运行 npm i style-loader css-loader sass-loader node-sass -D 命令安装 loader;
    • webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
      
  • 加载外联样式
  1. 在需要的组件内,使用 import '外联样式表相对路径' 语法导入外联的样式表;

  2. 使用 className 属性(将classclassName代替)为对应的组件添加样式类:

    <div className="font12 colorRed">使用外联样式表</div>
    
  • 注意:
  • 默认情况下,react 组件中使用 import 导入的样式表会在全局生效,并不存在模块作用域!
  • 同时,react 中并没有类似于 vue 的 scoped 指令;

3.css模块化

react 中可以开启 css 模块化功能,从而防止组件的样式在全局生效,解决组件间样式冲突问题。

开启 css 模块化:

.css.less.scss 后缀名的样式表,都可以单独开启模块化功能,只需在对应的样式 loader 规则中找到 css-loader,并添加 modules 参数,即可开启 css 模块化:

  1. .css 模块化:
    { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] }
    
  2. .less 模块化:
    { test: /\.less$/, use: ['style-loader', 'css-loader?modules', 'less-loader'] }
    
  3. .scss 模块化:
    { test: /\.scss$/, use: ['style-loader', 'css-loader?modules', 'sass-loader'] }
    

导入并使用模块化样式

  1. 导入被模块化的样式表:

    import cssObj from '样式表的相对路径'
    
  2. 使用模块化的样式:

    { /* 使用单个样式 */ }
    <div className={ cssObj.类名 }>使用模块化的样式表</div>
    { /* 使用多个样式 */ }
    <div className={ [cssobj.类名1, cssobj.类名1].join(' ') }>使用模块化的样式表</div>
    
	<div className={cssObj.item}>
	    <h1 className={cssObj['t-head']}>评论人:{props.user}</h1>
	    <h5 className={cssObj['t-body']}>评论内容:{props.content}</h5>
	</div>

:local():global()

  • 被模块化的样式表中,如果某个类被 :local() 包裹起来,则会被模块化;
  • 如果类被 :global() 包裹起来,则不会被模块化,这个类默认全局生效;
  • 注意: 只有 类选择器Id选择器 会被模块化控制,其它选择器无法被模块化控制!

4. styled-components

  1. 安装依赖项:
    npm install styled-components -S
    
  2. 在需要的组件内,导入依赖包:
    import styled from 'styled-components'
    
  3. 创建带样式的自定义组件:
    const MyButton = styled.button`
      background: transparent;
      border-radius: 3px;
      border: 2px solid palevioletred;
      color: palevioletred;
      margin: 0 1em;
      padding: 0.25em 1em;
    `
    
  4. 在页面上使用组件:
    <MyButton>按钮</MyButton>
    
2019-09-26 17:07:45 u011013840 阅读数 43
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1972 人正在学习 去看看 梁富城

react按钮  有返回

react样式切换

阅读数 672

react 的样式写法

阅读数 968

React的行内样式

阅读数 3746

没有更多推荐了,返回首页