组件的样式（含三元表达式 和 注释）

04-组件的样式

import '../css/01.css' //导入样式

function App(){
    var myname="lucax"
    var obj={
        background:"red",
        fontSize:"40px"  //font-size 所有样式的-都改为用驼峰写法去替代
}
    return (
        <div>
            #加花括号意思就是js语法 所以系统会给你计算 ，不加就和html标签那样不计算
        {10+20} 
        <br/>
            #调用变量也是同理用花括号
        {myname} 
        <br/>
            #三元表达式
        {10>20?"张三":"李四"} 
        <br/>
            #追加样式 写法一
        <div style={{background:"yellow"}}>背景变颜色</div> 
            #追加样式 写法二    
        <div style={obj}>背景变颜色</div> 
            #外部样式引用
        <div className="active">(外部样式)背景变颜色</div> 
             {/*这个是注释
        多行的注释*/}
        </div>
        )
}
export default App;

 

外部的样式

01.css

.active{
    background:blue
}

 

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './01-base/04-组件的样式'

ReactDOM.render(
<App></App>,
document.getElementById('root')
)

 

参考: https://www.bilibili.com/video/BV1dP4y1c7qd?p=9&vd_source=caabcbd2a759a67e2a3de8acbaaf08ea

 

另外的一种写法 多个判断

  <a-tag
          :key="tags"
          :color="
            tags === '正常' ? 'green' : tags.length > 2 ? 'orange' : 'red'
          "
          style="font-size: 14px"
        >
          {{ tags }}
        </a-tag>