加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React 教程第六篇 —— 样式绑定

发布时间:2020-12-15 06:26:54 所属栏目:百科 来源:网络整理
导读:普通样式名称使用 —— className app.css .c1{ color: red; width: 100%; height: 300px; border: solid 1px red;} app.js import './app.css'import React from 'react';import ReactDOM from 'react-dom';import './modules/cp/cp.scss'class Component1

普通样式名称使用 —— className

app.css

.c1{
    color: red;
    width: 100%;
    height: 300px;
    border: solid 1px red;
}

app.js

import './app.css'

import React from 'react';
import ReactDOM from 'react-dom';

import './modules/cp/cp.scss'
class Component1 extends React.Component{
    render(){
        return (
            <div className="c1"></div>
        )        
    }
}

ReactDOM.render(
    <Component1 />,document.getElementById('app')
)

行内样式

let c1 = {
    color: 'red',width: '100%',height: '300px',border: 'solid 1px red'
}
class Component1 extends React.Component{
    render(){
        console.log(c1)
        return (
            <div style={c1}></div>
        )        
    }
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读