06 React CSS樣式的使用

新增行內樣式style = }，樣式以物件型別

在行內樣式中：數值可以不用引號包裹；字串必須用引號

fontsize = font-size

注意： 在jsx中設定行內樣式，style的值不可為字串

//not a string. for example, style=} when using jsx.

第一種封裝：抽離style

import react from 'react'

const itemsytle =
const userstyle = 
const contentstyle = 
export default function commentitem(props)

//第二種封裝,合併物件

const style = ,
user: ,
content: 
}export default function commentitem(props)

檔案

export default,
user: ,
content: 
}

//jsx檔案

import react from 'react'
import style from '@/components/style'
export default function commentitem(props)

1.安裝css樣式表loader

cnpm i style-loader css-loader -d

2.配置第三方loader

module: 

] }

.title 
h1

直接匯入的樣式表，沒有作用域，屬於全域性樣式

子元件中未匯入該樣式表，但是也會作用與子元件

這樣會造成樣式衝突

//匯入樣式表

import cssobj from '@/css/commentlist.css'
console.log(cssobj)//{} 這是乙個空物件，因為.css中未匯出 export default

但是css模組化只針對 類選擇器 和 id選擇器

不會對標籤選擇器生效，所以它還是全域性的

import cssobj from '@/css/commentlist.css'

console.log(cssobj) //

源**使用localidentname自定義生成的類名格式，可選引數有：

配置web.config.js檔案

:local(.test){}：使類名模組化，預設是這樣的

flex的樣式使用

元素與主軸的對齊方式 定義flex容器 display flex 設定容器內部元素的排列方向 row 定義排列方向，從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 flex direction row reverse nowrap 不換行 ...

樣式的使用（六）

setstyle 使用的注意事項 1.setstyle 方法盡量不要使用，不要在第一次使用 2.第一次使用樣式時，盡量設定在,外部樣式表中。3.如果必須使用setstyle 方法，要在例項化的時候就呼叫，這時setstyle 方法發生在preinitialize時。執行時載入樣式表 執行時載入樣式分...

樣式的使用（二）

和css樣式一樣，也分為外部樣式和本地樣式。本地樣式的例子 namespace s library namespace mx library namespace testfor4 testfor4.mybutton 下乙個例子，在flex 4中存在兩個命名空間，這個例子就是把某一樣式適用於spark...