JSX设置CSS样式详解

时间：2021-10-31 04:33:26

JSX设置CSS样式详解

1. 使用className设置样式(CSS的其他选择器也是同理)

(1)定义一个CSS文件style.css,和普通CSS一样定义class选择器

.sty1{//和普通CSS一样定义class选择器

    background-color: red;

    color: white;

    font-size: 40px;

}

(2)在JSX中导入编写好的CSS文件

import ‘./style.css’;

(3)JSX的调用

看背景颜色和文字颜色

说明:id选择器也是同理,由于React使用ES6编写代码,而ES6又有class的概念,所以为了不混淆class选择器在React中写成了className

可能你在看别人的代码的时候可能看到以下代码,这个是通过CSS Modules的写法

(1)定义一个CSS文件styleother.css,和普通CSS一样定义class选择器

    .sty2{

        background-color: red;

        color: white;

        font-size: 40px;

    }

(2)在JSX中导入编写好的CSS文件

import StyleOther from  './styleother.css';

(3)JSX的调用

<div className={StyleOther.sty2}>看背景颜色和文字颜色</div>

说明:使用这种方式也是可以的,只是你需要修改你的webpack的config文件,将loader: “style!css”修改为loader: “style!css?modules”,在css后面加一个modules,不过这两种方式是不能同时存在的,因为加了modules,

详细资料:点击打开链接

2. 使用React的行内样式样式设置样式

(1)在JSX文件中定义样式变量,和定义普通的对象变量一样

    let backAndTextColor = {

        backgroundColor:'red',

        color:'white',

        fontSize:40

    };

(2)JSX的调用

<div style={backAndTextColor}>看背景颜色和文字颜色</div>

当然你也可以不定义一个变量,直接写到JSX中,如下代码所示:

<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>

分析:style={},这里的{}里面放的是对象,不管你是定义一个对象然后使用,还是直接在里面写对象都是可以的,甚至可以写成下面的样子

    style={this.getInputStyles()}

    getInputStyles方法根据不同的状态返回不同的样式

    getInputStyles() {

        let styleObj;

        if (this.state.focused == true) {

            styleObj = {outlineStyle: 'none'};

        }

        return styleObj;

    }

3. JSX行内样式扩展

在 React 中，行内样式并不是以字符串的形式出现，而是通过一个特定的样式对象来指定。在这个对象中，key 值是用驼峰形式表示的样式名，而其对应的值则是样式值，通常来说这个值是个字符串,如果是数字就不是字符串,不需要引号。

    var divStyle = {

      color: 'white',

      backgroundImage: 'url(' + imgUrl + ')',

      WebkitTransition: 'all', // 注意这里的首字母'W'是大写

      msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀

    };

另外浏览器前缀除了ms以外首字母应该大写,所以这里的WebkitTransition的W是大写的。

当为内联样式指定一个像素值得时候， React 会在你的数字后面自动加上 “px” , 所以下面这样的写法是有效的：

    let backAndTextColor = {

        backgroundColor:'red',

        color:'white',

        fontSize:40

    };

有时候你的确需要保持你的CSS属性的独立性。下面是不会自动加 “px” 后缀的 css 属性列表：

columnCount

fillOpacity

flex

flexGrow

flexShrink

fontWeight

lineClamp

lineHeight

opacity

order

orphans

strokeOpacity

widows

zIndex

zoom

相关文章