2个样式 react_react样式 类样式多个使用 - CSDN
  • React的行内样式

    2018-08-21 09:39:00
    使用React的行内样式设置样式 (1)在JSX文件中定义样式变量,和定义普通的对象变量一样 let backAndTextColor = { backgroundColor:'blue', color:'#ff671b', fontSize:40 };   (2)JSX的调用 <div...

    使用React的行内样式设置样式
    (1)在JSX文件中定义样式变量,和定义普通的对象变量一样

    let backAndTextColor = {
        backgroundColor:'blue',
        color:'#ff671b',
        fontSize:40
    };
    
    
     

    (2)JSX的调用

    <div style={backAndTextColor}>行内样式测试</div>

    也可以直接写到JSX中,如下:

    <div style={{backgroundColor:'blue',color:'#ff671b',fontSize:40}}>行内样式测试</div>

     

     

    展开全文
  • // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要写入一个样式对象,而这个样式对象的位置...

    组件中DOM样式

    第一种:行内样式

    想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现:

    // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号
     <p style={{color:'red', fontSize:'14px'}}>Hello world</p>
    

    行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方,例如render函数里、组件原型上、外链js文件中

    第二种:className(外部引用)

    React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体

    其实我们大多数情况下还是大量的在为元素添加类名,但是需要注意的是,class需要写成className(因为毕竟是在写类js代码,会收到js规则的限制,而class是关键字)

    <p className="hello" style = {this.style}>Hello world</p>
    

    第三种:classname/classnames第三方包定义类名

    有时候需要根据不同的条件添加不同的样式,比如:完成状态,完成是绿色,未完成是红色。那么这种情况下,我们推荐使用classname/classnames这个包:

    <p
        className = { 
            classname({
                size: true,
                bg: true
            })
        }
    > 第三包classname定义 </p>
    

    第四种:样式组件(styled-components)

    styled-components是针对React写的一套css-in-js框架,简单来讲就是在js中写css。npm链接
    styled-components是一个第三方包,要安装

    const Container = styled.div`
        width: 100px;
        height: 100px;
        background: pink;
        color: white;
    `
    
    展开全文
  • react定制全局样式

    2019-12-05 16:11:45
    Ant Design Mobile定制主体样式(https://mobile.ant.design/docs/react/customize-theme-cn) 根据Ant Design Mobile定制主题样式无效,需要参考 1. 进入 → ...
    1. Ant Design Mobile定制主体样式(https://mobile.ant.design/docs/react/customize-theme-cn)
      根据Ant Design Mobile定制主题样式无效,需要参考

      1. 进入 →  https://ant.design/docs/react/use-with-create-react-app-cn
      2. 找到  → 自定义主题
      
    展开全文
  • 玩转React样式

    2016-09-09 23:44:43
    CSS可以最大限度的分离样式和内容,选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。但是在React这里就是另外一回事了,虽然React不是不用CSS。但是,它在给元素添加样式的时候方式不同。...

    很久很久以前,就有人用CSS来时给HTML内容添加样式。CSS可以最大限度的分离样式和内容,选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。

    但是在React这里就是另外一回事了,虽然React不是不用CSS。但是,它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含,并且可复用。这就是为什么HTML元素和Javascript放在一起组成了Component(组件)。

    React的自包含组件需要在定义的时候就定义好样式,这样才能实现自包含。本文即将带你学习如何给React的组件添加样式,当然其中包括如何使用CSS。两个都会讲到,虽然React不鼓励这样。

    准备工作

    要在HTML也中使用React有两种方法,一个是使用Webpack编译打包,另一个是使用网页直接添加React相关js文件。

    用webpack来编译、打包React组件。并在一个index.html的页面中使用该代码。具体的准备步骤可以看这里。最后打包到一个叫做bundle.js的文件中。HTML页面看起来是这样的:

    <html>
      <head>
        <meta charset="utf-8">
        <title>Add style to React</title>
      </head>
      <body>
        <div id="content" />
        <script src="public/bundle.js" type="text/javascript"></script>
        <span style="float:center">Yo!</span>
      </body>
    </html>

    也可以在网页中直接使用React的js代码。

    <html>
      <head>
        <meta charset="utf-8">
        <title>Add style to React</title>
        <!-- 所需要引入的React及相关js -->
        <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
        <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <!-- end -->
      </head>
      <body>
        <div id="content" />
        <!-- 我们自己的js -->
        <script src="public/bundle.js" type="text/javascript"></script>
        <span style="float:center">Yo!</span>
      </body>
    </html>

    jquery文件可以不用添加,这里用jquery是用来请求服务器的,暂时用不到。

    无论使用哪一种方式。最后在页面中使用的js都是bundle.js。如果用了webpack的方式,那么bundle.js就是由webpack便已打包生成的。如果用的第二种方法,那么bundle.js就是我们自己手动编写的js代码。

    <div id="content" />React生成的HTML元素都会放在这个div里面。

    项目结构

    使用Webpack的话,项目的整体结果是这样的:

    -webapp
      |--public         // webpack 编译打包后的js文件所在目录
           |--css       // css文件所在的目录
      |--src            // 使用React编写的代码所在目录
      |--index.html     // HTML页面

    如果你使用网页内部加载React的话,那么就直接在public目录下创建一个bundle.js文件,并在index.html引用即可。

    我们就以一个用户登录的界面喂例子。登录,用户需呀输入用户名、密码,然后点击登录按钮。

    React代码

    我们来看看要实现这个功能React代码应该什么样的。

    import React from 'react';
    import {render} from 'react-dom';
    
    import LabeledInputText from './LabeledInputText';
    import SubmitButton from './SubmitButton';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {un: '', pwd: ''};
            this.handleLogin = this.handleLogin.bind(this);
            this.handleUserNameChanged = this.handleUserNameChanged.bind(this);
            this.handlePasswordChanged = this.handlePasswordChanged.bind(this);
        }
    
        handleUserNameChanged(un) {
            this.setState({un: un});
        }
    
        handlePasswordChanged(pwd) {
            this.setState({pwd: pwd});
        }
    
        handleLogin() {
            // $.ajax({
            //     url: this.props.url,
            //     dataType: 'json',
            //     method: 'POST',
            //     data: this.state,
            //     cache: false,
            //     success: function(data) {
            //         this.setState({data: data});
            //     }.bind(this),
            //     error: function(xhr, status, err) {
            //         console.error(this.props.url, status, err.toString());
            //     }.bind(this)
            // });
    
            alert(`${this.state.un}, ${this.state.pwd}`);
        }
    
        render() {
            var divStyle = {
                color: 'blue',
                wdith: '150px',
                paddingTop: '10px',
                display: 'inline-block'
            };
            return (
                <div style={divStyle}>
                    <p> Yo, React </p>
                    <LabeledInputText labelText="Username" onUserNameChanged={this.handleUserNameChanged} />
                    <LabeledInputText labelText="Password" onPasswordChanged={this.handlePasswordChanged} />
    
                    <SubmitButton title="Submit" onLogin={this.handleLogin} />
                </div>
            );
        }
    }
    
    render(<App />, document.getElementById('content'));
    
    // LabeledInputText
    import React from 'react';
    
    export default class LabeledInputText extends React.Component {
        constructor(props) {
            super(props);
            this.handleTextChange = this.handleTextChange.bind(this);
        }
    
        handleTextChange(e) {
            if (this.props.labelText.toLowerCase() == 'username') {
                this.props.onUserNameChanged(e.target.value);
            } else {
                this.props.onPasswordChanged(e.target.value);
            }
        }
    
        render() {
            return (
                <div>
                    <span>{`${this.props.labelText} :`}</span>
                    <input type="text" placeholder={this.props.labelText} onChange={this.handleTextChange} />
                </div>
            );
        }
    }
    
    // SubmitButton
    import React from 'react';
    
    export default class SubmitButton extends React.Component {
        constructor(props) {
            super(props);
            // this.state = {value: ''};
    
            // bind event handler
            this.handleLogin = this.handleLogin.bind(this);
        }
    
        handleLogin(e) {
            // this.setState({value: e.target.value});
            // alert('hello react');
            this.props.onLogin()
        }
    
        render() {
            return (
                <input onClick={this.handleLogin} type="button" value={this.props.title} />
            );
        }
    }

    App类是这个登录界面的整体。里面的HTML元素可以分为两类,一个是label和label后面的输入框,另一类是提交按钮。

    LabeledInputText是label和输入框的组合。SubmitButton是提交按钮。

    生成出来的HTML页面是这样的:

    <html><head>
        <meta charset="utf-8">
        <title>Add style to React</title>
      </head>
      <body>
        <div id="content">
            <p> Yo, React </p>
            <div>
                <div>
                    <span>Username :</span>
                    <input type="text" placeholder="Username">
                </div>
                <div>
                    <span>Password :</span>
                    <input type="text" placeholder="Password">
                </div>
                <input type="button" value="Submit">
            </div>
        </div>
      </body>
    </html>

    在添加样式之后,效果是这样的:

    使用CSS添加样式

    在React组件上使用CSS样式比你想的还要简单。因为最终React还是把组件都转化成了HTML元素,而你会的各种CSS技巧一样都可以作用在这些元素上。但是还是有一些小小的地方需要注意:

    理解生成的HTML

    在使用CSS之前,你需要知道React生成的HTML元素是什么样子的。看起来很容易理解,因为JSX语法和HTML元素非常接近。

    import React from 'react';
    import {render} from 'react-dom';
    
    import LabeledInputText from './LabeledInputText';
    import SubmitButton from './SubmitButton';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {un: '', pwd: ''};
        }
    
        render() {
            var divStyle = {
                color: 'blue',
                wdith: '150px',
                paddingTop: '10px',
                display: 'inline-block'
            };
            return (
                // <div style={divStyle}>
                <div className="box-group">
                    {/*<p> Yo, React </p>*/}
                    <LabeledInputText labelText="Username" onUserNameChanged={this.handleUserNameChanged} />
                    <LabeledInputText labelText="Password" onPasswordChanged={this.handlePasswordChanged} />
    
                    <SubmitButton title="Click" onLogin={this.handleLogin} />
                </div>
            );
        }
    }
    
    render(<App />, document.getElementById('content'));

    render方法里的就是整体的React组件的结构。所有的东西都在一个div里面。LabeledInputText就是一个文字Label和一个input的文本输入框的组合。SubmitButton是一个可以点击的按钮,这里其实是一个含有click事件的div。

    全部组件生成HTML之后:

    <div id="content">
        <div data-reactroot="" class="box-group">
            <div class="form-control">
                <span>Username :</span><input type="text" placeholder="Username">
            </div>
            <div class="form-control form-under">
                <span>Password :</span><input type="text" placeholder="Password">
            </div>
            <div class="form-control form-under form-button">
                Click
            </div>
        </div>
    </div>

    里面一些div包含的各种元素,就如前文所说的一样。另外还有的就是很多的css的class。

    React中使用CSS

    首先添加css样式文件:

    input:focus{
        outline: none !important;
        border:1px solid red;
        /*box-shadow: 0 0 10px #719ECE;*/
    }
    .box-group {
        width:230px;
        border: 1px solid blue;
        padding:5px;
        margin: 10px;
    }
    .form-control {
        padding:5px;
    }
    
    .form-under {
        margin-top:10px;
    }
    .form-button {
        display:block;
        background-color:red;
        text-align: center;
    }

    上面就是main.css文件包含的全部的样式。这些样式主要是给登录的整个界面元素的边框设置为蓝色,然后在用户名、密码和登录按钮之间增加间距,最后给按钮指定背景色为红色。

    接下来需要在React的组件中使用这些样式。但是直接使用class是不行的。毕竟JSX和HTML元素是有区别的。就以登录按钮为例:

    <div onClick={this.handleLogin} className="form-control form-under form-button">
        {this.props.title}
    </div>

    在React中指定class名称使用className。React的className最后就会转化成HTML的class

    这个登录按钮的样式有一点复杂:className="form-control form-under form-button"使用了三个不同的css的selector。这些selector的样式都会应用到这个登录按钮上。

    用React的方式来添加样式

    React推崇的是内联的方式定义样式。这样做的目的就在于让你的组件更加的容易复用。和组件相关的全部内容聚合到一起,包括你的组件看起来是什么样的,是如何工作的。

    下面就把之前添加的全部的样式className都去掉,回到最开始的状态。

    /* index.js */
    <div>
        {/*<p> Yo, React </p>*/}
        <LabeledInputText labelText="Username" onUserNameChanged={this.handleUserNameChanged} />
        <LabeledInputText labelText="Password" onPasswordChanged={this.handlePasswordChanged} />
    
        <SubmitButton title="Click" onLogin={this.handleLogin} />
    </div>
    
    /*LabeledInputText*/
    <div>
        <span>{`${this.props.labelText} :`}</span>
        <input type="text" placeholder={this.props.labelText} onChange={this.handleTextChange} />
    </div>
    
    /*SubmitButton*/
    <div onClick={this.handleLogin}>
        {this.props.title}
    </div>

    登录使用的三个组件的render方法返回的内容的className已经全部都去掉了。

    要往React组件内添加一个自定义的样式对象,这个对象包含的就是css样式的名称和样式的值。只不过样式的名称不是css的background-color而是JSX的backgroundColor。例如:

    let divStyle = {
        width:'230px',
        border: '1px solid blue',
        padding:'5px',
        margin: '10px'
    };
    
    return (
        <div style={divStyle}>
            {/*<p> Yo, React </p>*/}
            <LabeledInputText labelText="Username" onUserNameChanged={this.handleUserNameChanged} />
            <LabeledInputText labelText="Password" onPasswordChanged={this.handlePasswordChanged} />
    
            <SubmitButton title="Click" onLogin={this.handleLogin} />
        </div>
    );

    小贴士

    在React里注释不能用HTML的方式,那是木有用的。也不能直接用js的
    注释,那也是不行的。而是用大括号括起来,之后用/**/来注释。
    看起来是这样的`{/* 这是一个注释 */}`。

    divStyle就是我们定义的样式对象。要使用这个样式,只要在React组件中给style赋值。如:style={divStyle}

    让样式可以自定义

    要让组件的子组件的某些样式可以自定义很简单。只需要使用React组件的props。比如,我现在想要定制不同的用户名、密码输入框的边框颜色。

        <div style={divStyle}>
            {/*<p> Yo, React </p>*/}
            <LabeledInputText labelText="Username" bordercolor="green" onUserNameChanged={this.handleUserNameChanged} />
            <LabeledInputText labelText="Password" bordercolor="red" onPasswordChanged={this.handlePasswordChanged} />
    
            <SubmitButton title="Click" onLogin={this.handleLogin} />
        </div>

    之后在LabeledInputText文件中:

    styleObj = Object.assign({}, this.pwdStyle, {border: '1px solid ' + this.props.bordercolor});

    每次需要用到边框值的时候都从props里面取:this.props.bordercolor

    根据不同的状态显示不同颜色

    HTML的文本输入框有两种状态,focused和blured。用户要输入内容的时候,文本框就在focus的状态下。用户的焦点移开,比如开始输入密码的时候,用户名的文本框就在blur状态下了。

    在focus的状态下的时候,显示指定颜色的边框,否则不显示边框。这个时候就要用到React的另一个重要概念:State

    首先,给input注册focus和blur的事件处理方法。

    <input type="text" ref="theInput" placeholder={this.props.labelText}
                        style={this.getInputStyles()}
                        onChange={this.handleTextChange}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur} />
    
    // hanleFocus & handleBlur
    handleFocus() {
        this.setState({focused: true});
    }
    
    handleBlur() {
        this.setState({focused: false});
    }

    状态都存在state里了。然后在input里指定style:style={this.getInputStyles()}getInputStyles方法就会根据不同的状态返回不同的样式。

        getInputStyles() {
            let styleObj;
            if (this.state.focused == true) {
                styleObj = {outlineStyle: 'none'};
            }
            return styleObj;
        }

    这个方法在focus的时候去除了input默认的效果,blur的时候保持原样。

    最后

    随着React学习的深入,你会发现React添加样式的方式和之前的方式大有不同。如果你透过上面的例子收入思考的话你会发现,之所以React使用了和以往不同的添加样式方法是有原因的。HTML、CSS和Javascript这样的传统方法在处理网页的时候是非常有用的,但是在处理React组件组成的复杂的界面的web app的时候却显得力不从心。

    展开全文
  • 注意点: 使用于所有的组件样式react中规定,写行内样式时,要写在{{}}中,使用驼峰命名发 &lt;div style={{color: 'red', fontSize: 12}}&gt;这是行内样式&lt;/div&gt; 2. 使用外联式样式 配置...
  • react样式写法

    2019-05-15 21:48:26
    react样式写法 内联样式 const Home3 = function () { return ( //这里第一个大括号表示要插入js语法了,第二个大括号表示对象的括号 <div style = {{ color: 'red',fontSize: '50px',background: 'green'...
  • react中使用局部样式

    2020-06-29 23:42:04
    在vue里我们可以用scoped轻松编写局部样式,但是react并没有提供这关键字,怎么办呢?请往下看: 这种方法必须使用类选择器 1.将css文件命名为xxx.module.scss(当然css、less、sass也是没问题的) 2.以前...
  • React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解 1.使用className设置样式(CSS的其他选择器也是同理) (1)定义一CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通CSS一样定义...
  • react开发过程中,经常会需要动态向元素内添加样式style或className,那么应该如何动态添加呢??? 一、react向元素内,动态添加style 例如:有一DIV元素, 需要动态添加一 display:block | none 样式, ...
  • reactNative 中的样式

    2019-01-31 13:36:04
    reactNative 样式React Native 中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名,...
  • 今天在写代码的时候,发现一问题:在一标签里面已经有一个样式类,然后我还要添加一个样式类(此样式类是根据逻辑代码判断的) 首先来看下此需求: 一般给标签加样式类都是通过className设置属性 &lt;div...
  • React-Native 样式设置

    2019-07-31 17:39:37
    一、样式声明 1.内联样式: 一般情况下,内联样式简单粗暴,让你可以快速的调试,但内敛样式比较低效,一般情况下应该避免使用 ...2.对象样式: 对比内联样式的语法,是将内联样式分离出来,避免每一次render...
  • 大家好,我是凯文,本篇文章介绍在React项目中设置元素样式以及引入CSS文件的方法,供各位参考。 在学习React框架之前,许多人应该已经熟悉了如何在html文件中使用css样式,这里再作一下说明,CSS样式分为3种形式:...
  • react条件样式

    2017-12-25 17:28:56
    react条件样式
  • 由于 React的JSX语法,能在React中使用样式的方式有很多,本文主要介绍在React中经常使用CSS样式的五种方法:  //1行内样式 // 2声明样式 // 3引入样式 // 4 CSS Modules模块化 // 5 Styled-component   ...
  • react样式私有

    2019-08-13 03:59:21
    解决的问题,两组件之间 有相同的class名,造成其中一无法按预期的显示. import React, { Component } from 'react' import styles from "./Csstest2.module.css" //给样式加module export default class ...
  • react 项目一般都会采用css module 写样式类,当一组件需要写多类名的时候,怎么写比较方便。如下: className={`${styles.btnsWrp} ${styles.textRight}`} 采用es6的字符串模板方式。 ...
  • React—行内样式

    2019-09-06 11:35:25
    React—行内样式 <span style={{background: 'yellow'}}>内容</span>
  • react样式的方式

    2019-12-02 14:57:44
    第一种:行内样式的写法 1-------------------------------------...在标签上绑定style属性,style={ } ,向{}里面存放一对象,对象的内容就是样式的表达式 <div style={{color: 'red',fontSize: '20px'}}>d...
  • react的普遍写法一{}代表里面是一可执行的代码块,className只有一{},而style之所以有两{},是因为react里的style需要是一对象,所以就多出了一{}来包住样式属性,使其成为一对象,所以当要实现多...
1 2 3 4 5 ... 20
收藏数 37,998
精华内容 15,199
关键字:

2个样式 react