React中组件设置样式的几种方法

方式一： 使用普通style样式

// 让数组中的每一项变成双倍
const numbers = [2,2,4,5];
const doubles = numbers.map((item,index) => {
  return <li style={{ color: 'red', fontWeight: 200 }} key={index}> {item * 2}}</li>
})

方式二：样式对象和UI结构分离

const userStyle = { color: 'red', fontWeight: 200 };
// 让数组中的每一项变成双倍
const numbers = [2,2,4,5];
const doubles = numbers.map((item,index) => {
  return <li style={userStyle} key={index}> {item * 2}}</li>
})

方式三：//第二种封装方式：合并成一个大的样式对象

const styles = {
    item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 #ccc'},
    user: {fontSize: '14px'},
    content: {fontSize: '12px'}
} 
//使用function构造函数定义普通的无状态组件
export default function CmtItem(props){
    return <div style = {styles.item}>
             <h1 style = {styles.user}>评论人：{props.user}</h1>
             <p style = {styles.content}>评论内容：{props.content}</p>
             </div> 
 }

方式四：抽离为单独的样式模块：创建一个style.js文件：

export default{
    item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc'},
    user: {fontSize: '14px'},
    content: {fontSize: '12px'}
}

//封装方式:抽离为单独的样式模块
import styles from '@/components/styles.js'

//使用function构造函数定义普通的无状态组件
export default function CmtItem(props){
    return <div style = {styles.item}>
             <h1 style = {styles.user}>评论人：{props.user}</h1>
             <p style = {styles.content}>评论内容：{props.content}</p>
             </div> 
 }

方式五：创建样式表文件（该方法具体后续再写）